如何在刷新浏览器不更改值（JavaScript）的localStorage中保存？

Question

我有一个点击计数器。 每一次点击都会增加价值。 我想保存到本地存储中，刷新页面保留值。 现在它将值保存在本地存储中，但如果我刷新浏览器则不会保留它。 我应该在我的代码中进行哪些更改以使其正常工作？

let countedClicks = 0;
    
const countingClicks = () => {
  countedClicks += 1;
  localStorage.setItem("btnClicksSaved", countedClicks);
  let savedClicks = localStorage.getItem("btnClicksSaved");
  clicks.innerHTML = `${savedClicks} times`;
  console.log(countedClicks + "counted");
  console.log(savedClicks + "local storage");

  if (savedClicks > 5) {
    resetBtn.style.display = "flex";
  } else {
    resetBtn.style.display = "none";
  }
};

Answer 1

您应该首先获取数据，否则它将始终以 0 开头。

let countedClicks = parseInt(localStorage.getItem("btnClicksSaved") ?? '0');
    
const countingClicks = () => {
  countedClicks += 1;
  localStorage.setItem("btnClicksSaved", countedClicks);
  let savedClicks = localStorage.getItem("btnClicksSaved");
  clicks.innerHTML = `${savedClicks} times`;
  console.log(countedClicks + "counted");
  console.log(savedClicks + "local storage");

  if (savedClicks > 5) {
    resetBtn.style.display = "flex";
  } else {
    resetBtn.style.display = "none";
  }
};

Answer 2

因为您正在从内存中读取计数点击次数（使用变量countedClicks ）。 您应该直接从本地存储中读取它。 刷新页面后变量值会丢失，因为它们保存在内存中，另一方面，本地存储数据保存到磁盘中。

 const countingClicks = () => { let savedClicks = localStorage.getItem("btnClicksSaved"); if (savedClicks === null) { localStorage.setItem("btnClicksSaved", 0); savedClicks = localStorage.getItem("btnClicksSaved"); } const countedClicks = parseInt(savedClicks) + 1; localStorage.setItem("btnClicksSaved", countedClicks); savedClicks = localStorage.getItem("btnClicksSaved"); clicks.innerHTML = `${savedClicks} times`; console.log(countedClicks + "counted"); console.log(savedClicks + "local storage"); if (savedClicks > 5) { resetBtn.style.display = "flex"; } else { resetBtn.style.display = "none"; } };

Answer 3

尝试这个

/* load value from localStorage first */
let countedClicks = localStorage.getItem("btnClicksSaved");
/* there's no "btnClicksSaved" in localStorage
 * when you visited the site for the first time, so set the value to "0" */
if (countedClicks != null) { return } else { countedClicks = 0 }

const countingClicks = () => {
  /* no need to change anything here */
} 

Answer 4

Localstorage 只能接受字符串，并且countedClicks不是字符串。 您可以使用内置的 JSON 对象在数据进出本地存储时对数据进行字符串化和解析，例如：

let countedClicks = 0;

const countingClicks = () => {
  countedClicks += 1;
  localStorage.setItem('btnClicksSaved', JSON.stringify(countedClicks));
  let savedClicks = JSON.parse(localStorage.getItem('btnClicksSaved'));
  clicks.innerHTML = `${savedClicks} times`;
  console.log(countedClicks + 'counted');
  console.log(savedClicks + 'local storage');

  if (savedClicks > 5) {
    resetBtn.style.display = 'flex';
  } else {
    resetBtn.style.display = 'none';
  }
};

Answer 5

这是我用的东西

function main() {
    var count = parseInt(localStorage.getItem('countX'));
    if(count > 0) {
        count = count +1;
        localStorage.setItem('countX', count);

    }
}