页面刷新后如何保值？

Question

按下每个按钮后，我设法获得了数字 go，但我需要在刷新页面后保留该值。 我知道我可以使用localStorage ，但我不明白它是如何工作的。

<form>
  <input type="text" id="number" value="0" />
  <input type="button" onclick="incrementValue10()" value="$10" />
  <input type="button" onclick="incrementValue20()" value="$20" />
  <input type="button" onclick="incrementValue50()" value="$50" />
</form>

function incrementValue10() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value += 10;
  document.getElementById('number').value = value;
}

function incrementValue20() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value += 20;
  document.getElementById('number').value = value;
}

function incrementValue50() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value += 50;
  document.getElementById('number').value = value;
}

Answer 1

要使用 localStorage，您只需调用setItem()来保存值并调用getItem来检索它。

还值得注意的是，您不应使用onX属性。 他们是不好的做法。 请改用不显眼的事件处理程序。 此外，您可以通过将单个 function 附加到所有元素并通过每个元素的data属性改变其操作来轻松地 DRY 代码。 是这样的：

let output = document.querySelector('#number');

// save the value on click of the button
document.querySelectorAll('.inc').forEach((el) => {
  el.addEventListener('click', function() {
    var newValue = parseFloat(output.value) + parseFloat(this.dataset.inc);
    output.value = newValue;
    localStorage.setItem('number', newValue);
  });
});

// retrieve the value when the page loads
var oldValue = localStorage.getItem('number') || 0;
output.value = oldValue;

<form>
  <input type="text" id="number" value="0" />
  <input type="button" class="inc" data-inc="10" value="$10" />
  <input type="button" class="inc" data-inc="20" value="$20" />
  <input type="button" class="inc" data-inc="50" value="$50" />
</form>

请注意，SO 片段会阻止对 localStorage 的访问，因此这是一个完全可用的jsFiddle

Answer 2

您可以为此使用本地存储：

 if(localStorage.getItem('number') != ""){
    document.getElementById('number').value = localStorage.getItem('number');
 }

 function incrementValue10()
 {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value+=10;
    document.getElementById('number').value = value;
    localStorage.setItem('number', document.getElementById('number').value)

}
function incrementValue20()
{
  var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
   value+=20;
   document.getElementById('number').value = value;
   localStorage.setItem('number', document.getElementById('number').value)

}
function incrementValue50()
{
   var value = parseInt(document.getElementById('number').value, 10);
   value = isNaN(value) ? 0 : value;
   value+=50;
   document.getElementById('number').value = value;
   localStorage.setItem('number', document.getElementById('number').value)

 }

Answer 3

根据代码，您只是将值存储在内存（堆）中。 重新加载页面时，浏览器只会分配新的 memory 并且您无法保留以前的值。 因此，如果值与特定客户端的 UI state、服务器端数据库（如 SQL、NoSQL、RDBMS）完全相关，则将值存储在客户端（localstorage、sssionstorage 和 Index DB）等持久性中。

请参阅此链接以基本了解客户端存储。

https://www.w3schools.com/html/html5_webstorage.asp