React Redux localStorage购物车刷新后数据清空问题排查

核心要改三个地方，先解决你最容易踩的坑：要实现页面刷新保留、浏览器重启自动清空的效果，不要用localStorage。localStorage是持久化存储，除非手动调用API删除或者用户清浏览器缓存，否则关浏览器也不会消失，完全不符合你的需求。你应该用sessionStorage，它的生命周期和当前浏览器会话绑定，页面刷新数据不丢，关闭浏览器/标签页后自动清空，刚好匹配你的要求。

具体修改步骤 #

• 修复初始值读取逻辑，增加合法性校验
  你现在的写法有两个问题：一是JSON.parse没有异常捕获，如果存储里的数据被篡改、或者旧版本数据格式不匹配，会直接抛错导致页面白屏；二是重复写了两次|| []兜底逻辑，完全没必要。改成带校验的安全读取版本：

let savedCartItems = [];
try {
  const storageVal = sessionStorage.getItem('cartItems');
  if (storageVal) {
    const parseResult = JSON.parse(storageVal);
    // 校验解析结果必须是数组，避免异常数据污染初始状态
    savedCartItems = Array.isArray(parseResult) ? parseResult : [];
  }
} catch (e) {
  // 解析失败直接清除异常存储数据，用空数组兜底
  console.error('购物车缓存数据损坏，已重置', e);
  sessionStorage.removeItem('cartItems');
}

const initialState = {
  cartItems: savedCartItems
};

• 把存储同步逻辑从单个action里抽离，统一在store层处理
  你现在只在addToCart和deleteFromCart两个action里写了存储写入，后续如果加了修改商品数量、批量清空购物车的逻辑，很容易漏写同步，导致缓存和实际状态不一致。直接在创建store的地方订阅状态变化，只要购物车数据更新就自动同步到sessionStorage，一劳永逸：

// 你的store创建文件，路径按实际项目调整
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 替换成你自己的reducer引入路径

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

// 订阅状态变化，自动同步购物车数据
store.subscribe(() => {
  const { cartItems } = store.getState().cartReducer;
  if (Array.isArray(cartItems)) {
    sessionStorage.setItem('cartItems', JSON.stringify(cartItems));
  }
});

export default store;

• 清理action里的冗余代码
  把addToCart、deleteFromCart两个方法末尾获取cartItems、调用setItem的代码全部删掉，后续所有购物车修改操作都不需要手动写存储同步，store订阅会自动处理。

补充说明 #

不建议用localStorage加beforeunload事件监听的方案实现浏览器关闭清空：不同浏览器对页面关闭事件的触发逻辑存在差异，部分场景下（比如浏览器崩溃、多标签页关闭）会出现事件不触发、误删其他标签页数据的问题，兼容性远不如直接用sessionStorage。

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