localStorage数据永久保存需手动清理，sessionStorage随标签页关闭自动销毁；前者同源共享用于持久状态，后者单标签隔离用于临时上下文。
Web Storage 的生命周期管理关键在于分清 localStorage 和 sessionStorage 的本质差异，并按场景主动干预，而不是依赖默认行为。
localStorage：持久但非永久，需显式清理
数据默认保留在浏览器中，直到用户手动清除（如清空网站数据）、调用 removeItem() 或 clear()，或通过代码逻辑主动过期。它不自动失效，也没有内置 TTL（生存时间）机制。
- 若需“带过期时间”的持久存储，必须自行实现时间戳校验：
const saveWithExpiry = (key, value, hours = 24) => {
const item = {
value,
expiry: Date.now() + hours * 60 * 60 * 1000
};
localStorage.setItem(key, JSON.stringify(item));
};
const getWithExpiry = (key) => {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
const item = JSON.parse(itemStr);
if (Date.now() > item.expiry) {
localStorage.removeItem(key);
return null;
}
return item.value;
};
- 适合长期保存的用户级设置（如主题、语言、折叠面板状态），但敏感信息（如 token）不应直接存于此处，除非配合加密与短时效策略
- 注意跨标签页同步：修改后可通过
storage事件通知其他同源页面更新视图
sessionStorage：自动销毁，专注单页会话边界
数据仅绑定当前标签页（tab）生命周期，关闭该 tab 即清空，刷新页面保留，新开同域名 tab 不共享。它不提供跨页通信能力，也不参与浏览器重启后的恢复。
- 典型用途是多步骤流程中的临时中间态，例如表单分步填写、向导页进度、未提交的草稿
- 避免误用：不要把它当作“轻量级登录态”——关闭 tab 就登出，体验断裂；真正需要会话延续的应结合服务端 session 或短期 localStorage + token 刷新机制
- 可配合页面卸载钩子做兜底清理（如
beforeunload中调用removeItem），防止残留无效数据
混合策略与边界控制
单一存储类型难以覆盖所有需求，实践中常组合使用：
- 登录凭证：用
sessionStorage存临时 access_token（防 tab 外泄），用localStorage存 refresh_token（加密+时效校验） - 用户偏好：存
localStorage，但监听系统级变化（如 OS 主题切换）并及时同步更新 - 大体积缓存（如离线资源清单）：改用
IndexedDB，避免 localStorage 的 5–10 MB 瓶颈及同步阻塞风险 - 隐私模式兼容：部分浏览器在无痕窗口中限制 localStorage 写入，建议降级为内存缓存或提前检测
localStorage可用性
清理时机与可观测性
生命周期管理不只是“存”和“取”，更包含“何时删”和“删得干净吗”：
- 用户退出登录时，应统一清空相关 key（推荐白名单方式，避免误删他用数据）
- 版本升级时，可检查 storage 中的 schema 版本号，不匹配则清空或迁移旧数据
- 利用浏览器 DevTools 的 Application → Storage 面板，实时查看各 origin 下的 localStorage/sessionStorage 占用与内容，辅助调试生命周期异常
- 对高频写入场景（如实时编辑器），避免每 keystroke 都 setItem，改用防抖 + 批量落盘
