localStorage和sessionStorage用法完全相同，均通过setItem()、getItem()、removeItem()、clear()操作，区别仅在生命周期（永久 vs 标签页级）、作用域（同源共享 vs 每标签页独立）和容量（5–10MB vs 4–5MB）。
怎么存、取、删数据：localStorage 和 sessionStorage 用法完全一样
两者 API 完全一致，都是通过 setItem()、getItem()、removeItem() 和 clear() 操作。区别只在生命周期和作用域，不是语法。
比如存一个用户 ID：
localStorage.setItem('userId', '12345');读取它：
const id = localStorage.getItem('userId'); // 返回字符串 "12345"注意：localStorage 和 sessionStorage 都只接受字符串值——传对象会自动调用 toString()，结果是 [object Object]。所以实际开发中必须手动序列化：
立即学习“Java免费学习笔记（深入）”；
- 存前用
JSON.stringify(obj) - 取后用
JSON.parse(str)
localStorage 和 sessionStorage 的核心区别就三点
不是“哪个更好”，而是“谁该在哪用”。关键看这三条：
-
生命周期：
localStorage永久存在（除非手动清或用户删），sessionStorage只活到当前标签页关闭（刷新不丢，关掉就清） -
作用域：
localStorage同源下所有标签页共享；sessionStorage每个标签页独立，新开的同网址标签页也是全新 session -
容量上限：通常
localStorage约 5–10 MB，sessionStorage约 4–5 MB，但具体取决于浏览器，且不保证跨浏览器一致
什么场景该选哪个？别凭感觉，看数据“要不要跨页”和“要不要持久”
选错不是报错，而是悄悄出 bug。比如把登录态存在 sessionStorage，用户开新标签页就登出；把表单草稿存在 localStorage，换设备就丢了。
- 用
localStorage：用户主题偏好、语言设置、长期缓存的配置项、JWT token（需配合 HttpOnly Cookie 做双重校验） - 用
sessionStorage：多步骤表单中间状态、临时筛选条件、页面内跳转携带的数据（如从列表页点进详情页要带 ID）、防重复提交的 nonce - 别用它们存敏感信息：两者都可被 JS 直接读取，XSS 攻击下等于裸奔；密码、银行卡号、未加密 token 不该放这里
容易踩的坑：类型、异常、兼容性
看似简单，实际线上问题多来自这几处：
-
getItem()找不到 key 时返回null，不是undefined，直接解构或链式调用会报Cannot read property 'xxx' of null - 超出容量会抛
QuotaExceededError异常，尤其在 iOS Safari 下阈值更严，建议写入前 try-catch - 隐身模式下部分浏览器（如 Safari）会禁用
localStorage，setItem静默失败，可用try { localStorage.setItem('test','x') } catch(e) { /* fallback */ }检测 - 不同协议（
httpvshttps）、子域名（a.example.comvsb.example.com）视为不同源，数据完全隔离
真正难的不是记住 API，而是判断“这个数据到底该活多久、在哪儿可见”。一旦想清楚这点，选 localStorage 还是 sessionStorage 就不会犹豫了。
