localStorage长期保存且同域标签页共享，sessionStorage仅限当前标签页、关闭即销毁；二者均只存字符串、容量约5–10MB、不参与HTTP请求。
localStorage 和 sessionStorage 都是浏览器提供的客户端数据存储机制，用于在用户本地保存键值对（字符串），但它们的生命周期和作用域完全不同。
localStorage：长期保存，跨会话有效
数据一旦写入，就一直保留在浏览器中，除非被代码主动删除或用户手动清除缓存。关闭标签页、重启浏览器甚至重启电脑都不会丢失。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
- 适用场景：用户偏好设置（如主题、语言）、登录态标记（配合后端 token 使用）、离线缓存数据
- 写法示例：localStorage.setItem('theme', 'dark')
- 读取示例：localStorage.getItem('theme')
- 注意：只能存字符串；对象需先 JSON.stringify()，读取后要 JSON.parse()
sessionStorage：仅限当前标签页，关闭即销毁
数据只在当前浏览器标签页（或窗口）中有效，页面刷新保留，但关闭该标签页后数据自动清空。不同标签页之间互不共享。
- 适用场景：表单草稿临时保存、多步骤流程中的中间状态、一次性验证码或跳转参数
- 写法示例：sessionStorage.setItem('step', '2')
- 读取示例：sessionStorage.getItem('step')
- 注意：同样只支持字符串，对象需序列化/反序列化
关键区别一目了然
- 有效期：localStorage 永久（直到清除）；sessionStorage 仅当前会话（标签页）
- 共享范围：两者都按协议+域名+端口隔离；localStorage 同域名所有标签页共享；sessionStorage 仅本标签页可用
- 容量限制：通常都是 5–10MB 左右（因浏览器而异），远大于 Cookie 的 4KB
- 是否随请求发送：都不参与 HTTP 请求，完全由 JS 控制，比 Cookie 更轻量、更隐私
用错的常见坑
- 把敏感信息（如密码、完整 token）直接存在 localStorage —— XSS 攻击可直接读取，不安全
- 期望 sessionStorage 在新标签页打开时还能访问（比如 window.open() 或链接 target="_blank"）—— 实际上是全新会话，数据为空
- 存对象不处理 JSON 转换，导致 getItem() 返回 "[object Object]" 这种无意义字符串
