Question

按每个按钮后，我设法使数字增加，但是刷新页面后我需要保留该值。我了解我可以使用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属性。他们是坏习惯。改用不显眼的事件处理程序。另外，您可以通过将单个函数附加到所有元素并通过每个元素的data属性来改变其作用，从而轻松地使代码干燥。像这样：

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

根据代码，您只是将值存储在内存（堆）中。重新加载页面时，浏览器只是分配新的内存，而您不能保留以前的值。因此，如果值与特定客户端的UI状态，SQL Server，NoSQL，RDBMS等服务方数据库完全相关，则将其存储在客户端（本地存储，sssionstorage和Index DB）等持久性中。

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

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

页面刷新后如何保留价值？

3 个答案: