页面刷新保存用户切换操作，关闭应用时销毁数据的实现方案咨询

我来给你梳理一套完全贴合需求的实现方案，分步骤讲清楚：

1. 初始化时区分「首次打开/重启」和「页面刷新」 #

页面加载时，我们要先判断当前是用户刚打开应用，还是刷新页面——这一步靠sessionStorage实现，它的生命周期和标签页会话绑定，关闭标签页就会自动清空：

• 先检查sessionStorage中是否存在比如appHasLoaded的标记：
  • 如果不存在：说明是首次打开或关闭后重启应用，此时直接清空localStorage中保存的toggle值，把appHasLoaded标记存入sessionStorage，最后将this.initialValue设为默认的false。
  • 如果存在：说明是页面刷新，此时从localStorage中读取保存的toggle值（注意要把字符串转成布尔值，用JSON.parse()处理），赋值给this.initialValue。

代码示例（以Vue项目为例，其他框架逻辑通用）：

mounted() {
  const hasLoaded = sessionStorage.getItem('appHasLoaded');
  if (!hasLoaded) {
    // 首次打开/重启应用，清除本地存储的旧数据
    localStorage.removeItem('toggleInitialValue');
    sessionStorage.setItem('appHasLoaded', 'true');
    this.initialValue = false;
  } else {
    // 页面刷新，读取用户最后一次操作的值
    const savedValue = localStorage.getItem('toggleInitialValue');
    this.initialValue = savedValue ? JSON.parse(savedValue) : false;
  }
}

2. 用户切换时同步更新localStorage #

当用户点击切换按钮改变this.initialValue时，立刻把最新值存入localStorage，确保刷新页面能拿到最后一次操作的结果：

handleToggle() {
  this.initialValue = !this.initialValue;
  // 同步保存到localStorage
  localStorage.setItem('toggleInitialValue', JSON.stringify(this.initialValue));
}

3. 核心逻辑说明 #

这套方案为什么能精准满足你的需求？

• 页面刷新保留值：刷新时sessionStorage的appHasLoaded标记还在，所以会读取localStorage里的最新值，不会清空。
• 关闭应用销毁数据：当用户关闭标签页/浏览器时，sessionStorage会被自动清空。下次打开应用时，因为找不到appHasLoaded标记，就会清除localStorage里的旧数据，恢复默认的false。

如果需要兼容多标签页场景，可以额外监听storage事件同步不同标签页的状态，但单标签页场景下上面的方案完全够用。

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