如何修复sessionStorage自增键在页面跳转后被覆盖的问题？

嘿，这个问题我之前也碰到过——全局变量在页面刷新或者跳转后会丢失内存中的状态，咱们来一步步把它搞定！

问题根源 #

你代码里的var i = 0是一个内存中的全局变量，当你跳转到其他页面再返回时，整个脚本会重新加载，这个变量会被重新初始化为0，自然就会覆盖之前存在sessionStorage里的旧数据了。

解决方案：把计数器存在sessionStorage里 #

我们需要把计数器的状态持久化到sessionStorage中，而不是只放在内存里。这样页面重新加载时，就能读取到上一次的计数器值，继续递增：

// 从sessionStorage读取当前计数器，不存在则默认0
let i = parseInt(sessionStorage.getItem("messageCounter")) || 0;

function contactUs(event){
  event.preventDefault();
  var lettre = new message();
  // 使用当前计数器值作为存储键
  sessionStorage.setItem("lettreNo" + i, JSON.stringify(lettre));
  // 计数器自增后，把最新值存回sessionStorage
  sessionStorage.setItem("messageCounter", ++i);
  $("form")[0].reset();
}

关键细节解释 #

• 初始化时，我们用sessionStorage.getItem("messageCounter")读取之前保存的计数器值，用parseInt转成数字，如果没有找到（比如第一次访问）就用|| 0默认设为0。
• 每次存储完消息后，我们把自增后的i存回sessionStorage，确保下次页面加载时能拿到最新的数值。
• 这样不管你怎么跳转页面、刷新，计数器的状态都会被保留，不会再出现覆盖旧数据的问题。

小提醒：如果用户手动清除了浏览器的会话存储，或者浏览器会话过期（比如关闭浏览器再打开），计数器会重置为0，这是sessionStorage的正常特性哦。

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