如何实现页面每次刷新时计数器数值自动+1并持久存储

• 变量未初始化：你声明了count和index但没有赋值，首次加载时它们的值是undefined，执行count++后会得到NaN，后续运算全部异常。
• 未读取本地存储的历史值：每次页面刷新都会重置JS变量，你没有先从localStorage里读取之前保存的计数器数值，直接就执行递增操作，自然无法继承之前的计数。
• 类型未转换：localStorage存储的所有值都是字符串格式，取出后如果不转成数字，做运算时可能出现类型拼接错误。

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
  // 先从localStorage读取历史计数，不存在就初始化为0，同时转成数字
  let count = Number(localStorage.getItem("incCount")) || 0;
  // 计数加1
  count++;
  alert("after count++："+count);
  // 存回localStorage
  localStorage.setItem("incCount", count);

  alert("Page is loaded");
}
</script>
</body>
</html>

1. 页面加载时优先尝试从localStorage读取之前保存的incCount值
2. 如果读取不到（首次访问场景）就初始化为0，同时将读取到的值转成数字类型避免运算异常
3. 给计数器加1后再存回localStorage，每次刷新都会继承之前的数值完成递增

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