你有没有遇到过这种情况？在电商网站选了一堆商品放进购物车，结果一刷新页面，购物车空了。或者登录某个ref="/tag/88/" style="color:#EB6E00;font-weight:bold;">网页系统，关掉浏览器再打开，又要重新输入账号密码。其实，这背后和浏览器的存储机制大有关系，特别是 sessionStorage 和缓存之间的配合与区别。
sessionStorage 是什么？
简单来说，sessionStorage 是浏览器提供的一种临时存储方式。它可以把一些数据保存在用户的当前会话中，只要不关闭浏览器标签页，这些数据就一直存在。比如你在填一个复杂的表单，中途不小心刷新了页面，如果用了 sessionStorage，之前填的内容还能自动恢复。
它的使用也很简单：
sessionStorage.setItem('username', '小明');
const name = sessionStorage.getItem('username');
console.log(name); // 输出：小明和缓存是一回事吗？
很多人容易把 sessionStorage 和“页面缓存”混为一谈，其实它们干的事不一样。浏览器缓存（比如 HTTP 缓存）主要是为了加快网页加载速度，把图片、JS、CSS 这些静态资源存下来，下次访问直接从本地拿，不用重新下载。
而 sessionStorage 存的是“数据”，比如用户状态、临时配置、表单内容等，和资源加载没关系。你可以理解成：缓存是给“网页本身”提速的，sessionStorage 是给“用户操作”留痕的。
举个生活化的例子
想象你在自助餐厅吃饭。缓存就像餐厅提前准备好的熟食档——你一来就能拿，不用等厨师现做；而 sessionStorage 就像你手里那个托盘，你暂时放了几样菜，但如果离开餐厅（关闭标签页），托盘就被收走了，东西也就没了。
什么时候用哪个？
如果你希望用户关掉页面再回来还能看到之前的内容，比如记住夜间模式开关，那就得用 localStorage，它比 sessionStorage 更持久。
但如果你只是想在一次操作流程中保留数据，比如分步骤提交订单，中间跳转页面也不能丢信息，那 sessionStorage 正合适。它不会像 cookie 那样每次请求都发给服务器，也不会像缓存那样被浏览器自动清理。
现在很多网站的登录状态管理，也会结合 sessionStorage 使用。比如你登录后，token 存进 sessionStorage，每次发请求时取出来加到 header 里。一旦关闭页面，token 自动消失，安全性也更高。
小心使用的坑
别忘了，sessionStorage 只在当前域名下有效，而且不同标签页之间不共享。比如你在两个标签页打开同一个网站，它们的 sessionStorage 是独立的。另外，存储空间有限，一般只有5MB左右，别往里塞大文件。
还有，它只能存字符串。如果要存对象，得先转成 JSON：
const user = { id: 1, name: '小红' };
sessionStorage.setItem('user', JSON.stringify(user));
const savedUser = JSON.parse(sessionStorage.getItem('user'));了解清楚 sessionStorage 和缓存的分工，才能更好把握网页数据的生命周期。下次遇到“数据怎么丢了”的问题，不妨先看看它到底该不该被存下来，又该存多久。