如何实现页面刷新后保留数据，关闭浏览器/新标签页时清除数据

• 核心逻辑：sessionStorage的作用域是单个标签页的会话——刷新当前标签页时数据会保留，但关闭标签页/浏览器、或者在新标签页打开同一URL时，数据会自动清空，完美匹配你的需求。

• 具体实现步骤：

  1. 存储数据：把需要保留的应用数据转成JSON字符串存入sessionStorage：

     // 示例：存储应用数据
     const appData = { username: 'demo', preferences: { theme: 'light' } };
     sessionStorage.setItem('appPersistentData', JSON.stringify(appData));
     

  2. 页面初始化读取：页面加载时从sessionStorage读取并解析数据，恢复应用状态：

     // 示例：读取并恢复数据
     const savedData = sessionStorage.getItem('appPersistentData');
     if (savedData) {
       const restoredData = JSON.parse(savedData);
       // 将数据同步到你的应用状态（比如React useState、Vue的data等）
     }
     

  3. 实时同步更新：当应用内数据发生变化时，及时更新sessionStorage的内容，确保刷新后能拿到最新状态。

• 为什么之前的persist方案不行：
  多数持久化插件（比如redux-persist）默认用localStorage作为存储引擎，而localStorage是跨会话的持久存储，关闭浏览器后数据不会自动清除，所以不符合你的要求。如果一定要用这类插件，也可以修改其存储引擎为sessionStorage，但直接使用原生sessionStorage会更轻量、更直接。

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