7. sessionStorage 会话存储

sessionStorage 是"临时储物柜"：只在当前标签页活着——刷新页面数据还在，但关掉这个标签页就全部销毁，而且别的标签页看不到它存的东东。API 和 localStorage 一模一样，只有"寿命"不同。

7.1 互动演示（存储 + 对比）

存好后：① 刷新本页数据还在；② 新开一个标签页打开本页 → 读不到（跨标签页隔离）。

7.2 知识点讲解

① 用法：API 与 localStorage 完全一样

// 用法和 localStorage 一模一样，只是这柜子关标签页就没
sessionStorage.setItem("token", "abc123"); // 往临时柜子里塞一张
sessionStorage.getItem("token"); // 翻出来 → "abc123"
sessionStorage.removeItem("token"); // 抽走这张
sessionStorage.clear(); // 整柜倒空
sessionStorage.length; // 现在柜里几张

会了 localStorage 就会 sessionStorage，把名字换一下就行。考试爱考"两者区别"。

② 隔离测试：为什么 B 标签页读不到 A 存的数据？

// 做个实验（课件作业二③）：
// 标签页 A：往自己柜子里写 sessionStorage.setItem('page','tab1')
// 标签页 B：想去读 sessionStorage.getItem('page')
// → 拿到 null！因为这柜子只属于 A 那个标签页，B 看不见

// 换成 localStorage 再试：
// 标签页 A：localStorage.setItem('page','tab1')
// 标签页 B：localStorage.getItem('page')
// → 拿到 'tab1'！同一个网站下所有标签页共用一个大柜子

// 再把标签页关了重新打开：
// sessionStorage 那张便签烧了；localStorage 的纸条还在

对比项	sessionStorage	localStorage
生命周期	关标签页/浏览器即销毁	永久，手动删除才消失
作用域	仅当前标签页	同域名所有页面共享
刷新页面	数据保留	数据保留
关标签页重开	数据销毁	数据还在

一句话记忆：sessionStorage 是"这个标签页专属的便签"，localStorage 是"全家（同域名）共用的档案柜"。

③ 典型业务场景（什么时候用它）

// 1. 表单草稿：写到一半刷新不丢，关掉标签页自动清（最常用）
sessionStorage.setItem("draft", textarea.value);

// 2. 当前这页临时选的筛选项
// 3. 这次打开浏览器期间临时传个状态
// 别用它存需要长期记住的东西（登录态请交给 localStorage 或 Cookie）

一句话记住：sessionStorage 和 localStorage API 一样，但关标签页就销毁、跨标签页读不到；临时数据用它、长期数据用 localStorage。