localStorage.clear()可清空当前源所有键值对，sessionStorage随标签页关闭自动重置；清空后须用DevTools验证，且需排查Service Worker、cacheStorage等其他存储层。
HTML5 的 localStorage 和 sessionStorage 不能靠刷新页面或关掉浏览器清空，必须主动调用 API 或手动清除——这是开发者最容易误以为“已失效”却实际残留数据的坑。
localStorage.clear() 是最直接的清空方式
调用 localStorage.clear() 会删除当前源（origin）下所有 localStorage 键值对，不带参数、无返回值、同步执行。它不会影响 sessionStorage，也不会触发其他存储机制（比如 IndexedDB）。
常见错误：在跨域 iframe 或 Service Worker 中直接调用，会因同源策略报错 SecurityError: Failed to read the 'localStorage' property。
- 确保脚本运行在目标页面的主上下文（即非 iframe 子域、非扩展 content script）
- 若需清空指定键，改用
localStorage.removeItem('key')，避免误删其他业务数据 - 开发调试时可配合
localStorage.key(i)遍历确认内容，再决定是否清空
sessionStorage 只在当前标签页生命周期内有效
sessionStorage 不需要手动清空——关闭标签页、刷新页面（除非是 history.pushState 后的软跳转）都会自动重置。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 新开同 URL 标签页会创建全新
sessionStorage，和原标签页互不干扰 -
sessionStorage.clear()仅清空当前标签页的全部数据，比localStorage.clear()更安全 - 不要依赖
beforeunload事件来“保存最后状态”，该事件中调用sessionStorage.setItem()可能被浏览器中断（尤其移动端）
浏览器 DevTools 是最可靠的验证手段
代码执行后是否真清空了？别信 console.log，直接看 DevTools 的 Application → Storage 面板：
- Chrome / Edge：左侧选
Local Storage或Session Storage，右侧列表为空即成功 - Firefox：Storage → localStorage / sessionStorage，点刷新图标可强制重载当前存储快照
- Safari：Develop → Show Web Inspector → Storage → Local Storage，注意默认可能隐藏空条目，需手动展开
如果面板里还有数据，说明要么没执行到 clear，要么执行在了错误 origin（比如 http://localhost:3000 和 http://127.0.0.1:3000 被视为不同源）。
彻底清空还可能涉及缓存与 Service Worker
有时你以为清空了 localStorage，但页面行为依旧“记住上次状态”，真正原因可能是：
- Service Worker 缓存了 HTML 或 JS 文件，导致旧逻辑仍在运行 —— 运行
navigator.serviceWorker.getRegistrations()，然后调用registration.unregister() - PWA 安装后使用了
cacheStorage，需手动调用caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key)))); - 某些框架（如 Vue Router 的 scrollBehavior）把位置存在内存或
history.state，和localStorage无关
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(r => r.unregister());
});
}
本地存储清空本身很简单，难的是确认清空范围是否覆盖全部相关机制——尤其是当多个存储层（localStorage + cacheStorage + indexedDB + cookie）混用时，漏掉任意一层都可能让“已清空”变成假象。
