LocalStorage适合存主题设置、语言选择等小体积非敏感数据；禁存密码、银行卡号；存取需JSON序列化/解析并加try-catch；应加时间戳控制过期，监听storage事件同步多标签页。
LocalStorage 是前端实现数据持久化的最常用方式之一，它能让数据在页面刷新、关闭再打开后依然存在，适合保存用户偏好、登录状态、配置信息等不频繁变更但需长期保留的内容。
明确哪些数据适合用 LocalStorage 持久化
不是所有数据都该存进 LocalStorage。关键看三点：是否需要跨会话保留、是否体积小、是否不涉敏感凭证。
- 推荐存：主题设置、语言选择、默认城市、表单草稿（非敏感）、静态字典数据（如省市区列表）
- 谨慎存：token 类登录凭证（建议配合 HttpOnly Cookie 或内存缓存 + 定期校验）
- 禁止存：密码明文、银行卡号、身份证号等敏感信息
正确处理数据格式与序列化
LocalStorage 只支持字符串，直接存对象会变成 [object Object]，取出来也无法还原。
- 存前用
JSON.stringify()转换，例如：localStorage.setItem('settings', JSON.stringify({ theme: 'dark', lang: 'zh' })) - 取后用
JSON.parse()解析，同时加异常捕获防止解析失败崩溃：try { const settings = JSON.parse(localStorage.getItem('settings') || '{}'); } catch(e) { /* 处理损坏缓存 */ } - 避免直接存
Date、Function、undefined等无法被 JSON 序列化的值
主动管理缓存生命周期，避免堆积
LocalStorage 不会自动过期，长期积累可能占满容量或读到陈旧数据。
立即学习“Java免费学习笔记（深入）”；
- 为关键数据添加时间戳字段，比如存时一起写入：
localStorage.setItem('userProfile', JSON.stringify({ data: {...}, timestamp: Date.now() })) - 读取时判断是否超时（如 24 小时）：
if (now - cached.timestamp > 24 * 60 * 60 * 1000) { /* 过期，重新请求 */ } - 定期清理无用键，或封装一个带 TTL 的 set 方法，统一管控
监听变化并同步多标签页状态
LocalStorage 在同源下所有标签页共享，修改会触发 storage 事件，可用于跨页通信。
- 在页面中监听：
window.addEventListener('storage', e => { if (e.key === 'theme') updateTheme(e.newValue); }) - 注意：该事件只在其他标签页触发修改时才派发，当前页修改不会触发自身监听
- 结合 sessionStorage 区分“全局配置”和“本页临时态”，避免误同步
