2

Tenho este código:

var ClienteArray = [];

$('#btn-save').click(function(){    
    var cliente = JSON.stringify({
        Code : $('#stn-code').attr('value'),
        Name   : $('#stn-name').attr('value')
    });     
    ClienteArray.push(cliente);
    localStorage.setItem('ClienteArray', JSON.stringify(ClienteArray));
    alert('Registro adicionado.');
    return true;

});

    $("#test").html(localStorage.getItem('ClienteArray'));

Ele pega os dados colocados em um input e passar para o localStorage em Json um array de dados. Mas toda vez que eu clico no botão salvar, ao invés de ele colocar um novo dado no array ele apaga o antigo e faz um novo array, mas preciso que ele não apague esse antigo. Alguém tem alguma ideia?

2 Respostas 2

5

Assumo que bastaria carregar o array antes de atualizá-lo:

var ClienteArray = JSON.parse(localStorage.getItem('ClienteArray') || '[]');

$('#btn-save').click(function(){    
    var cliente = JSON.stringify({
        Code : $('#stn-code').attr('value'),
        Name   : $('#stn-name').attr('value')
    });     
    ClienteArray.push(cliente);
    localStorage.setItem('ClienteArray', JSON.stringify(ClienteArray));
    alert('Registro adicionado.');
    return true;

});

    $("#test").html(localStorage.getItem('ClienteArray'));

Obs: não foi testado.

2
  • Isso mesmo @Haroldo_OK !!! Muito obrigado! 20/10/2016 às 12:07
  • Okay, disponha.
    – Haroldo_OK
    20/10/2016 às 12:07
2

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>

1
  • Muito interessante sou post, vou dar um estudada sobre, obrigado pela dica! 20/10/2016 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .