Web Storage API 提供 localStorage 和 sessionStorage 两种键值对本地存储，接口统一但生命周期不同：localStorage 永久保存且跨标签页共享，sessionStorage 仅限当前标签页；均受同源策略限制，仅支持字符串值，容量约5MB。
Web Storage API 提供了简单、直接的键值对本地存储能力，核心是 localStorage 和 sessionStorage 两个对象，语法统一，操作轻量，无需第三方库即可上手。
基础语法：存、取、删、清
两者接口完全一致，仅生命周期和作用域不同。所有方法都通过 window.localStorage 或 window.sessionStorage 调用：
-
存储数据：使用
setItem(key, value)，key和value必须为字符串；若存对象，需先用JSON.stringify()转换 -
读取数据：使用
getItem(key)，返回对应值；若key不存在，返回null（不是undefined） -
删除单条：使用
removeItem(key)，键不存在时无报错、无副作用 -
清空全部：调用
clear()，会移除该存储对象下的所有键值对
localStorage 与 sessionStorage 的关键区别
选择哪种取决于数据需要保留多久：
- localStorage：数据永久保存（除非手动清除或用户主动删除），跨标签页、跨窗口共享，适合用户偏好、主题设置、登录态缓存等
- sessionStorage：仅限当前标签页生命周期，关闭该页即丢失，适合表单草稿、临时筛选状态、多步流程中间数据
注意：两者均受同源策略限制，不同域名、协议或端口之间无法互相访问对方的存储内容。
实用细节与常见避坑点
看似简单，但实际使用中容易忽略几个关键约束：
-
容量限制约 5MB（各浏览器略有浮动），超出会抛出
QuotaExceededError，建议提前做 try/catch 或预估大小 -
只支持字符串值：直接赋值非字符串（如数字、布尔、对象）会被隐式转成字符串（例如
true→"true"），存对象务必JSON.stringify()，取时配合JSON.parse() -
不能直接用点语法赋值（如
localStorage.name = "Alice"）虽在部分浏览器能运行，但不推荐——它绕过存储事件监听，且行为不稳定；应始终用setItem() -
监听变化用 storage 事件：在其他同源页面中可监听
window.addEventListener('storage', callback)，用于多标签同步状态（注意：触发页面自身修改不会收到该事件）
快速检测与兼容性保障
虽然现代浏览器全面支持（Chrome 4+、Firefox 3.5+、IE 8+、Safari 4+），但上线前仍建议做基础检测：
- 检查是否存在：
if (typeof localStorage !== 'undefined') - 捕获异常写入：
try { localStorage.setItem('test', 'ok'); } catch(e) { /* 可能禁用或满额 */ }
不复杂但容易忽略。
