计数器本地存储

Question

我想在此代码中添加 localStorage。不幸的是我不太擅长js。

function animateValue(id) {
  var obj = document.getElementById(id);
  var current = obj.innerHTML;

  setInterval(function() {
    obj.innerHTML = current--;
  }, 5000);
}

animateValue('value');

我试图添加在 https://developer.mozilla.org/it/docs/Web/API/Window/localStorage 上找到的一些行，但我无法使其工作。我怎么能？

Answer 1

在您的 setInterval 中，您可以将计数器添加到 localStorage（我假设这就是您想要做的）。

setInterval(function(){
  obj.innerHTML = current--;
  localStorage.setItem('counter', current--);
},5000);

然后获取该值（作为数字）：

JSON.parse(localStorage.getItem('counter'));

Answer 2

您可以按如下所示设置和获取 localStorage。

function animateValue(id) {
  var obj = document.getElementById(id);
  var counter = getLocalStoregaValue();
  var current = counter ? +counter : obj.innerHTML;
  obj.innerHTML = current;
  
  setInterval(function() {
    var counter = current--;
    obj.innerHTML = counter;
    localStorage.setItem('counter', counter);
  }, 5000);
}

function getLocalStoregaValue() {
  return localStorage.getItem('counter');
}

animateValue('value');

您可以在您的 js 中的任何位置使用 getLocalStoregaValue 方法来获取计数器值。

计数器本地存储

Counter localStorage

javascript

counter