Wagner, sei que o seu caso é bem mais simples, mas caso precise, você pode utilizar o Storage.js
, ele serve como uma abstração para diversas tecnologias de armazenamento, tais como o IndexedDB
, WebSQL
e Storage
(seja Local ou Session)
mas note, agora você não está trabalhando com um simples array
, mas com entidades
que são armazenadas em um esquema bem semelhante a um banco de dados
, então é interresante que informe um id
para cada registro.
então você pode usar o método getAll
para listar todos os seus registros e o set
para fazer um upsert
.:
storage(function (storage) {
storage.getAll("Pessoa", function (pessoas) {
console.log("consulta realizada com sucesso");
});
}, "LocalStorage");
storage(function (storage) {
storage.set("Pessoa", pessoa, function () {
console.log("pessoa inserida com sucesso");
});
}, "LocalStorage");
segue o exemplo completo, porem o mesmo não funciona em sandbox
, porém você pode conferir o mesmo no JSFiddle
faker.locale = "pt_BR";
var gerarPessoa = function () {
var pessoa = {};
pessoa.id = newGuid();
pessoa.Nome = faker.name.firstName();
pessoa.Sobrenome = faker.name.lastName();
pessoa.Nascimento = faker.date.past(50, new Date(1990, 1, 1));
pessoa.Telefone = faker.phone.phoneNumber();
pessoa.Email = faker.internet.email(pessoa.Nome, pessoa.Sobrenome);
return pessoa;
}
var newGuid = function() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
var appendPessoa = function(pessoa) {
if (typeof pessoa.Nascimento == "string")
pessoa.Nascimento = new Date(pessoa.Nascimento);
var linha = document.importNode(tmplPessoa, true);
linha.querySelector("td:nth-child(1)").textContent = pessoa.Nome;
linha.querySelector("td:nth-child(2)").textContent = pessoa.Sobrenome;
linha.querySelector("td:nth-child(3)").textContent = pessoa.Nascimento.toLocaleDateString();
linha.querySelector("td:nth-child(4)").textContent = pessoa.Telefone;
linha.querySelector("td:nth-child(5)").textContent = pessoa.Email;
pessoas.appendChild(linha);
}
var gerar = document.getElementById("gerar");
var tmplPessoa = document.getElementById("tmplPessoa").content;
var pessoas = document.querySelector("#pessoas tbody");
var database = null;
storage(function (storage) {
database = storage;
database.getAll("Pessoa", function (pessoas) {
pessoas.forEach(appendPessoa);
});
}, "LocalStorage");
gerar.addEventListener("click", function () {
var pessoa = gerarPessoa();
database.set("Pessoa", pessoa, function () {
console.log();
});
appendPessoa(pessoa);
});
table {
width: 100%;
}
<script src="https://cdn.rawgit.com/Marak/faker.js/master/build/build/faker.js"></script>
<script src="https://cdn.rawgit.com/lcavadas/Storage.js/master/build/storage.js"></script>
<input id="gerar" type="button" value="Gerar Pessoa" />
<table id="pessoas">
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Nascimento</th>
<th>Telefone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<template id="tmplPessoa">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>