退出需清 localstorage、sessionstorage、indexeddb、cache api 及解注册 service worker，注意同源校验、异步操作时机、cookie 依赖后端、按前缀清理关键数据并人工验证存储面板。
退出按钮点击后只调 localStorage.clear() 不够
它只能删掉 localStorage，但现代网页常同时用到 sessionStorage、IndexedDB、caches（Service Worker 缓存）甚至 cookie。用户点“退出”时若只清 localStorage，下次登录可能仍看到旧头像、缓存的列表页或离线可用的老 JS 逻辑。
-
sessionStorage虽随标签页关闭自动清空，但 SPA 中用history.pushState导航时不会触发重置，需显式调sessionStorage.clear() -
IndexedDB数据完全独立，必须用indexedDB.deleteDatabase('db-name')才能删，且是异步操作，不能等它完成再跳转 -
caches（Cache API）里的资源不随页面卸载消失，得主动调caches.delete('cache-name')，否则 Service Worker 仍会返回旧 HTML/JS - 部分登录态还存在
cookie（尤其是HttpOnly类），前端 JS 无法删除，得后端配合设Max-Age=0
退出前必须检查同源与执行上下文
在 iframe 里、跨域子页面、或被浏览器扩展注入的脚本中直接调 localStorage.clear() 会抛 SecurityError。实际执行前务必确认：
- 当前脚本运行在目标页面主 frame，且协议、域名、端口完全一致（
http://localhost:3000和http://127.0.0.1:3000是不同源） - 避免在
beforeunload或unload事件里执行耗时操作（如删 IndexedDB），这些事件中浏览器可能中断异步任务 - 如果用了 PWA，先解除 Service Worker 控制：
navigator.serviceWorker.getRegistration().then(r => r?.unregister())，再删缓存
按前缀清理比全清更安全
生产环境不该无差别调 localStorage.clear()——你存的 user_token 要清，但 ui_theme 或 analytics_optout 可能该保留。推荐用遍历 + 前缀匹配：
Object.keys(localStorage).forEach(key => {
if (key.startsWith('auth_') || key.startsWith('session_')) {
localStorage.removeItem(key);
}
});
注意：key.startsWith('auth_') 在 Safari 9 以下不支持，兼容写法是 key.indexOf('auth_') === 0；遍历时删 key 安全，因为 Object.keys() 返回的是快照数组，不影响迭代。
清除后必须人工验证，不能只信 console.log
执行完清理代码，别看控制台打印 “cleared”，直接打开 DevTools → Application → Storage 面板，手动展开 Local Storage、Session Storage、IndexedDB、Cache Storage 四个节点，逐个确认为空。尤其注意：
- Chrome 的
Clear site data按钮（Application → Clear storage）能一键清全部，但它不包括cookie和 DNS 缓存 - 如果页面行为没变，大概率是 Service Worker 还在控制页面，或者
cache busting失效（比如 JS 文件 URL 没加版本号） - 移动端 Safari 对
localStorage有严格配额限制，清完可能立刻触发QuotaExceededError，建议先try/catch包裹写入逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
