如何使用localStorage存储数字，保证页面刷新后数值不丢失

你对localStorage的特性记忆是准确的，localStorage的所有键、值都会自动转为字符串类型存储，数字0存入后会变成字符串"0"，读取时转为数字类型即可正常使用，本身是支持存储0值的。

你现有代码的问题主要有两个：

• 使用动态变化的count变量作为localStorage的存储键，count值会从3逐步降到0，导致存储的键名不固定，后续无法正确读取
• 没有在页面初始化时读取localStorage中存储的数值，刷新后count会被重新赋值为初始的3

修正后的完整代码如下：

JS代码 #

// 页面初始化优先读取本地存储的计数，无存储值时默认用3
var count = localStorage.getItem('click_count') ? Number(localStorage.getItem('click_count')) : 3;
var btn = document.getElementById("btn"); 

btn.onclick = function() {
  count--; 
  btn.style.transform = "scale(2)";
  setTimeout(function() {
    btn.style.transform = "scale(1)";
  }, 5); 

  if(count === 0) {
    // 用固定字符串作为存储键，存入当前count值
    localStorage.setItem('click_count', count); 
  }
}

CSS代码（原有逻辑无需修改） #

#btn {
  width : 300px;
  height : 300px;
  border : solid 2px red;
  border-radius : 50%; 
  transition : .1s;
}

HTML代码（原有逻辑无需修改） #

<button id="btn">Click me</button>

内容的提问来源于stack exchange，提问作者DavidJambonski