localStorage是浏览器提供的5MB左右持久化键值存储，仅支持字符串，存对象需JSON序列化，读取需解析；需封装容错函数处理配额超限和解析失败；遵循同源策略，关闭浏览器后仍保留，但不可存敏感信息。
localStorage 是浏览器提供的持久化键值存储机制，适合保存用户偏好、表单草稿、开关状态等非敏感数据。它以字符串形式存取，操作简单但需注意类型转换和容量限制（通常 5MB 左右）。
基础写入与读取
localStorage 只接受字符串作为值。若要存对象或数组，必须先用 JSON.stringify() 序列化；读取时再用 JSON.parse() 还原。
-
存数据：
localStorage.setItem('theme', 'dark')或localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) -
取数据：
const theme = localStorage.getItem('theme')或const user = JSON.parse(localStorage.getItem('user') || '{}') -
删除单个项：
localStorage.removeItem('theme') -
清空全部：
localStorage.clear()
封装一个安全的工具函数
直接调用原生 API 容易忽略错误（如超出配额、解析失败）。可封装一层带容错的辅助函数：
- 写入时捕获
QuotaExceededError，提示用户或降级处理 - 读取时用
try...catch包裹JSON.parse，避免因损坏数据导致脚本中断 - 提供默认值支持，比如
get('count', 0)返回数字 0 而非null
注意作用域与生命周期
localStorage 遵循同源策略：协议、域名、端口完全一致才可共享数据。关闭标签页或浏览器后数据仍保留，除非手动清除或被浏览器自动清理（如启用无痕模式、空间不足时可能被回收）。
- 不同子域名（
app.example.com与api.example.com）无法互相访问 - HTTP 和 HTTPS 视为不同源，数据不互通
- 移动端 WebView 中行为与桌面浏览器基本一致，但部分安卓旧版 WebKit 有兼容性问题
替代方案与适用边界
localStorage 不适合存敏感信息（如 token）、大量结构化数据或需要同步监听的场景。
- 敏感数据请用 httpOnly Cookie 或内存变量
- 频繁读写的复杂状态建议用 IndexedDB
- 需要跨标签页响应变化？搭配 storage 事件 监听：
window.addEventListener('storage', e => console.log(e.key, e.newValue))
