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）混用时，漏掉任意一层都可能让“已清空”变成假象。