时间戳

首页 > 解决方案 > 页面刷新后如何保值？

javascript - 页面刷新后如何保值？

问题描述

按下每个按钮后，我设法使数字上升，但刷新页面后我需要保持该值。我知道我可以使用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;
}

标签： javascripthtml

解决方案

要使用 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

推荐阅读