平时做网页开发时，总会遇到需要临时存点数据的情况。比如用户在一个表单里填了一半信息，不小心刷新了页面，内容全没了，体验就很差。这时候很多人会想到用浏览器的存储功能，而 sessionStorage 就是其中常用的一种。
sessionStorage 是什么？
简单说，sessionStorage 是 HTML5 提供的一种客户端存储方式，能在当前会话中保存数据。只要不关闭标签页，哪怕刷新页面，数据也不会丢。一旦关闭标签页，数据自动清除。它属于“会话级”的存储，适合临时存放一些不需要长期保留的信息。
比如你在电商网站选了一堆商品放进临时购物车，还没登录，开发者可能就会用 sessionStorage 把这些商品 ID 记下来。你刷新页面，购物车还在；关掉页面，记录就清空，挺省心。
它和缓存机制有什么关系？
很多人容易把 sessionStorage 和浏览器缓存混为一谈，其实它们干的事不一样。浏览器缓存（比如 HTTP 缓存）主要是为了减少网络请求，加快页面加载。比如 CSS、JS、图片这些静态资源，浏览器会根据响应头里的 Cache-Control 或 Expires 决定要不要从本地拿，而不是每次都去服务器要。
而 sessionStorage 存的是数据，不是资源文件。它不参与页面加载的资源调度，也不受缓存策略控制。换句话说，就算你的 JS 文件被强缓存了，里面的 sessionStorage 代码照样可以读写，互不影响。
但它们也能配合使用
虽然职责不同，但在实际项目里，它们常常一起上场。比如一个管理后台，首页要拉用户权限菜单。每次打开都请求一次太慢，可以用 sessionStorage 把菜单数据存下来，下次进来先看有没有缓存数据，有就直接渲染，同时在背后悄悄刷新数据。
这样既提升了响应速度，又避免了白屏等待。这里的“提速”其实是 sessionStorage 在帮忙，而页面本身的 JS 文件可能还靠浏览器缓存来保证快速加载。
举个实际例子
假设你在做一个问卷系统，用户填写过程中频繁切换页面。你可以把当前进度存在 sessionStorage 里：
// 保存当前填写进度
sessionStorage.setItem('survey_progress', JSON.stringify({
page: 3,
answers: { q1: 'A', q2: 'B' }
}));
// 页面加载时恢复进度
const progress = sessionStorage.getItem('survey_progress');
if (progress) {
const data = JSON.parse(progress);
// 恢复表单状态
}这个过程完全独立于浏览器是否缓存了你的问卷页面。哪怕资源是从磁盘缓存读的，数据也能通过 sessionStorage 正常恢复。
注意点别踩坑
sessionStorage 只在同源的窗口中共享，不同子域名也不行。比如 a.example.com 存的数据，b.example.com 是拿不到的。另外，它只能存字符串，对象得先 JSON.stringify，不然会变成 [object Object]。
还有就是别指望它持久化。有人误以为 sessionStorage 能像 localStorage 一样长期保存，结果用户一关浏览器，数据没了，问题就来了。该用哪个，得分清场景。
说到底，sessionStorage 不是传统意义上的缓存机制，但它确实能实现某种“数据缓存”的效果。理解清楚它们之间的分工和协作，写起前端才更顺手。