1

Estou montando um sistema bem simples que faz contagens simples. Eu preciso que esses valores continuem escritos no HTML após a página ser recarregada, só não aprendi ainda como manipular o API do localStorage.

Aqui uma versão de exemplo autoexplicativa e simplificada executável da estrutura do meu código:

    var total = window.document.getElementById('total')
    var debit = window.document.getElementById('debit')
    var credit = window.document.getElementById('credit')
    var somatotal = 0
    var somadebit = 0
    var somacredit = 0

    var valX = window.document.getElementById('valX')
    var valY = window.document.getElementById('valY')
    var valZ = window.document.getElementById('valZ')
    var somavalX = 0
    var somavalY = 0
    var somavalZ = 0

function addX() {
    var txtval = window.document.getElementById('txt-valX')
    var val = Number(txtval.value)
    var totalres = somatotal += val
    var totalval = somacredit += val
    total.innerText = totalres.toFixed(2)
    credit.innerText = totalval.toFixed(2)
    var valWay = somavalX += val
    valX.innerText = valWay.toFixed(2)
}
function addY() {
    var txtval = window.document.getElementById('txt-valY')
    var val = Number(txtval.value)
    var totalres = somatotal += val
    var totalval = somadebit += val
    total.innerText = totalres.toFixed(2)
    debit.innerText = totalval.toFixed(2)
    var valWay = somavalY += val
    valY.innerText = valWay.toFixed(2)
}
function addZ() {
    var txtval = window.document.getElementById('txt-valZ')
    var val = Number(txtval.value)
    var totalres = somatotal += val
    var totalval = somadebit += val
    total.innerText = totalres.toFixed(2)
    debit.innerText = totalval.toFixed(2)
    var valWay = somaY += val
    valY.innerText = valWay.toFixed(2)
}
Saldo 1:<div id="debit">0.00</div>
Saldo 2<div id="credit">0.00</div>
TOTAL:<div id="total">0.00</div>
<br><br>

Valor X:<div id="valX">0.00</div>
<input type="number" id="txt-valX" placeholder="vai add ao saldo 2">
<button onclick="addX()" id="bt0">OK</button><br>
Valor Y:<div id="valY">0.00</div>
<input type="number" id="txt-valY" placeholder="vai add ao saldo 1">
<button onclick="addY()" id="bt1">OK</button><br>
Valor Z:<div id="valZ">0.00</div>
<input type="number" id="txt-valZ" placeholder="vai add ao saldo 1">
<button onclick="addZ()" id="bt1">OK</button>

Como podem ver, eu tenho 3 valores diferentes que serão somados no saldo 1 ou saldo 2, que são exibidos no HTML. Cada saldo também é somado entre si e o total também é exibido no HTML. Agora preciso que os valores não se percam quando a página for reiniciada, sendo possível continuar a fazer os cálculos partir de como estava anteriormente.

Podem me ajudar? Desde já, sou grata!

O código no jsFiddle: https://jsfiddle.net/m89awdoL/

2 Respostas 2

2

A resposta do Augusto já é bem explicativa.

Resumidamente, você utiliza o localStorage.setItem(chave, valor) para salvar no storage. E utiliza o localStorage.getItem(chave) para recuperar do storage.

Atente-se para o fato de que quando você recuperar este valor, ele virá como string, então você precisará parsear, como já fez: var valorRecuperado = Number(localStorage.getItem(chave))

No seu caso, utilize o .setItem() no final de cada método executado para manter o valor atualizado, e .getItem() no começo do seu projeto para recuperá-los e adicione-os nos campos de texto e inputs, utilizando as propriedades .innerHTML e .value, respectivamente.

Referência oficial da Mozilla: https://developer.mozilla.org/pt-BR/docs/Web/API/Window/Window.localStorage

Abraço

4
  • Oi, Diogo! Agradeço pela resposta. Eu tentei muito, li muitos sites, vi vários exemplos, mas não obtive resultado esperado porque observei que não basta apenas armazenar o que está como resultado na div, mas que o valor atual das variáveis também tem que ser, de alguma forma, armazenadas para que os cálculos sejam possíveis partir daquele último valor, entende? Isso já parece impossível pra mim se virar sozinha. Se você pudesse me ajudar ia ser bom demais! Você pode verificar o fiddle que deixei na pergunta e ver se isso é mesmo possível? 12/04/2020 às 23:38
  • Oi, Tamara! Q bacana ver vc começando com JS. Tenho certeza q logo vc vai estar fera. Eu fiz uns ajustes no teu exemplo, dá uma olhada: jsfiddle.net/diogocosta/uoL1k0s8/20 Seu código tava bem confuso, rs, mas é normal no começo. Por isso meio que mudei bastante coisa. Tente entender as nuancies das mudanças, para aprender ao máximo. Espero que possa ter ajudado. Qualquer dúvida, só pingar. Se for últil pra ti, pode marcar minha resposta como válida? Um abraço. 13/04/2020 às 0:01
  • 1
    Resolvi encarar o JavaScript recentemente hahaha sempre fugia dele, ainda estou achando extremamente complicado, principalmente a lógica, mas não vou desistir. Vou tirar o máximo proveito do teu exemplo funcionando! Muito obrigado por ter dedicado seu tempo a me ajudar nessa! :D 13/04/2020 às 0:31
  • é isso aí! conte comigo, pelo seu empenho eu vi que já deu certo, hauhaha 13/04/2020 às 0:33
1

Usar o localStorage não tem mistério, ele fica disponível através da propriedade Window.localStorage que referencia um objeto do tipo Storage que disponibiliza alguns métodos e propriedades dentre eles destaco getItem() método que retorna o valor de uma chave armazenada, setItem() mátodo que adiciona ou atualiza uma determinada chave com o valor passado e a propriedade length que retorna o número de itens armazenados.

//Quando o DOM do documento inicial estiver completamente carregado e analisado
document.addEventListener("DOMContentLoaded", () => {

  //Cria uma referência para localStorage
  let storage = window.localStorage; 

  //Cria referência para os inputs
  let x = document.getElementById("x");
  let y = document.getElementById("y");
  let z = document.getElementById("z");

  //Verifica se existem itens armazenados no localStorage
  if (storage.length) {
    //Se tiver itens armazenados pega seus valores e atribui aos respectivos inputs
    x.value = storage.getItem("x"); 
    y.value = storage.getItem("y");
    z.value = storage.getItem("z");
  }

  //Instala eventos change para cada input referenciado nesse exemplo

  x.addEventListener("change", () => {
    //Caso input x tenha sido alterado armazena o novo valor no localStorage sob a chave x
    storage.setItem("x", x.value); 
  });

  y.addEventListener("change", () => {
    //Caso input y tenha sido alterado armazena o novo valor no localStorage sob a chave y
    storage.setItem("y", y.value);
  });

  z.addEventListener("change", () => {
    //Caso input z tenha sido alterado armazena o novo valor no localStorage sob a chave z
    storage.setItem("z", z.value);
  });

})
input {
  display: block;
}
<label>Valor X:<input type="number" id="x"></label>
<label>Valor Y:<input type="number" id="y"></label>
<label>Valor Z:<input type="number" id="z"></label>

Veja esse exemplo funcionando no Repli.it: https://repl.it/repls/FamiliarWarmAutomaticparallelization

Não disponibilizei o botão de executar na página pois aqui o código roda em um sandbox onde o localStorage fica desabilitado por conta da diretiva Same-origin policy. Para ver o código funcionando use o link acima indicado.

2
  • Augusto, muito obrigada pela tua resposta! Olha, eu não sei se é porque sou muito iniciante ou se meu Qi é baixo pra lógica (rs), mas eu não consigo compreender, tentei muito aqui. Comecei JS tem 1 mês, mas estou bem perdida ainda. Seria possível você editar na minha versão no jsFiddle? Ia me ajudar a entender melhor observando como funciona na prática. 12/04/2020 às 21:08
  • eu tentei assim, veja: jsfiddle.net/89feyh6w/1 12/04/2020 às 21:08

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 .