7. sessionStorage 会话存储

sessionStorage 就是会话存储，关标签页就清掉。

核心区别：
① localStorage——永久，除非手动删
② sessionStorage——关标签页就清
③ API 完全一样

坑：sessionStorage 不共享给新标签页、刷新页面数据还在、也是只能存字符串。

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

7.2 知识点讲解

① 用法：API 与 localStorage 完全一样

// 用法和 localStorage 一模一样，只是这柜子关标签页就没
// 往临时柜子里塞一张
sessionStorage.setItem("token", "abc123");

// 翻出来 → "abc123"
sessionStorage.getItem("token");

// 抽走这张
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 是"全家（同域名）共用的档案柜"。

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

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

// 2. 当前这页临时选的筛选项
// 存本页临时筛选项
sessionStorage.setItem("filter", "on-sale");

// 3. 这次打开浏览器期间临时传个状态
// 临时传个来源标记
sessionStorage.setItem("from", "list-page");

// 别用它存需要长期记住的东西（登录态请交给 localStorage 或 Cookie）

本页重点