为什么我存到SessionStorage的数据页面刷新后就没了？

西门世梅提问于 2026-02-11 13:16:27 阅读 11

优化

在开发购物车功能时，我用sessionStorage.setItem('cart', JSON.stringify(items))保存数据，但页面刷新后数据就找不到了，这是为什么啊？

我已经检查过键名拼写，存的时候用的是cart，取的时候也用了同样的键。代码逻辑是这样的：


// 存储时
const cartItems = [{id:1, qty:2}];
sessionStorage.setItem('cart', JSON.stringify(cartItems));

// 取回时
window.addEventListener('load', () => {
  const storedCart = sessionStorage.getItem('cart');
  if(storedCart) {
    console.log('成功获取到:', JSON.parse(storedCart));
  } else {
    console.error('购物车数据不见了！'); // 刷新后总触发这个
  }
});

明明存的时候控制台能打印出存储成功的日志，但刷新后getItem就返回null了，这是SessionStorage的什么特性导致的吗？

我来解答赞 5 收藏

反馈

2 条解答

Newb.静薇 Lv1

你这问题不是SessionStorage的锅，是执行时机错了。sessionStorage在页面刷新后数据其实还在，但你的load事件监听可能没起作用，或者代码根本没执行到存储那步。

最可能的原因是：你存数据的代码只在某个函数里执行了，比如点击事件回调，但刷新页面后那段代码没再触发，自然拿不到数据。你以为存进去了，其实压根没执行setItem。

你应该把存储逻辑放在每次购物车变更时立即执行，而不是依赖某个生命周期。比如：

function updateCart(items) {

  try {

    sessionStorage.setItem('cart', JSON.stringify(items));

  } catch(e) {

    console.error('存储失败，可能是无痕模式', e);

  }

}

然后每次修改购物车都调这个函数。取数据的时候别等load事件，直接在脚本顶部就取：

const storedCart = sessionStorage.getItem('cart');

const cartItems = storedCart ? JSON.parse(storedCart) : [];

这样效率更高，也更可靠。load事件没必要，DOM还没渲染完你就先把数据拿到了。

另外记得加try-catch，用户开无痕浏览时sessionStorage会抛错，别让整个购物车功能挂掉。

2026-02-11 18:01

设计师艺涵 Lv1

这问题我之前也踩过坑，sessionStorage 其实是按页面会话保存的，同源策略下每个标签页有独立的 session。你存的时候和取的时候必须在同一个标签页里刷新才会保留。

但最常见的原因是：你在控制台测试时可能用了隐私模式或者浏览器设置了关闭清除数据，这种模式下即使刷新页面，sessionStorage 也会被清掉。

先别想复杂，直接用这个小段代码在你的页面上快速验证一下：

console.log('当前有没有旧数据？', sessionStorage.getItem('cart'));



const cartItems = [{id:1, qty:2}];

sessionStorage.setItem('cart', JSON.stringify(cartItems));

console.log('已写入新数据:', cartItems);



// 立刻读出来看看

const storedCart = sessionStorage.getItem('cart');

console.log('刚写完能读到吗？', storedCart ? JSON.parse(storedCart) : null);

把这段代码贴到页面加载最前面，然后手动刷新一次。如果第一次运行有数据，刷新后没了，说明环境有问题。

真正可靠的方案是：开发时关掉无痕模式，确保没装什么“自动清理存储”的插件。另外上线前记得测试正常浏览器窗口的表现。

还有个坑就是单页应用路由跳转其实是同一页面，不会丢失 sessionStorage；但如果从 A 页面链接点进 B 页面，虽然同域也算不同 session，某些浏览器也可能不保持。

总之先排除环境问题，再看逻辑。大部分情况都是误用了无痕浏览导致的。

2026-02-11 13:20