HTML5应用无法真正卸载,需分层清理各宿主环境的状态:登出逻辑、缓存、权限、入口及第三方SDK状态,并按平台差异调用对应API,缺一不可。

为什么直接调用 location.href = 'about:blank' 不算真正“卸载”
很多开发者误以为跳转空白页或刷新页面就等于“卸载”,但实际问题仍在:
- localStorage / IndexedDB 数据完整保留,下次打开仍显示登录态
- Service Worker 持续后台运行,可能自动拉起通知或同步数据
- 微信内嵌 WebView 中,用户长按右上角“…” → “添加到桌面”生成的 PWA 图标不会消失
- Capacitor/Cordova 打包的 App 中,
navigator.app.exitApp()在 iOS 上根本无效(已被废弃)
localStorage.clear() + indexedDB.deleteDatabase() 是基础但不够
清本地数据是必要动作,但必须分场景控制范围,否则会误删其他模块数据(比如埋点 SDK 的 deviceId):
- 只清除业务相关 key:
['auth_token', 'user_profile', 'theme_preference']
,而非无差别localStorage.clear() - IndexedDB 需显式判断库名再删除:
indexedDB.deleteDatabase('myapp-db');(注意:Safari 对并发 delete 有 bug,建议加setTimeout延迟执行) - 若用了 Pinia/Persist 插件(Vue),需主动调用
store.$reset(),否则内存中状态残留
各平台“伪卸载”入口的主动清理策略
不同宿主提供不同的退出/清理能力,需按平台探测后调用:
- 微信环境:调用
wx.miniProgram.navigateBack({ delta: 100 })强制退到首页后关闭,再wx.clearStorage()清缓存(仅限已授权域) - PWA 安装态:检测
navigator.standalone === true,然后用self.registration.unregister()注销 Service Worker,并提示用户“长按图标 → 删除” - Cordova/Android:需在
config.xml中启用,并在登出时执行cordova.plugins.exitApp.exitApp()(仅 Android 有效) - iOS Safari 添加到主屏幕:无法代码删除图标,只能引导用户手动操作:“设置 → 主屏幕 → 找到图标 → 左滑删除”
最易被忽略的坑:document.cookie 和第三方 SDK 状态
单页应用常忽略 cookie 的 domain/path 设置,导致登出后仍能凭 cookie 自动登录:
立即学习“前端免费学习笔记(深入)”;
- 登出请求必须带
withCredentials: true,后端响应中设Set-Cookie: auth=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.yourdomain.com - 微信 JSSDK、支付宝 AlipayJSBridge、Firebase Auth 等 SDK 都有自己的会话管理,需分别调用
AlipayJSBridge.call('logout')或auth.signOut() - 若用了 Sentry、Umami 等监控 SDK,登出时应调用
Sentry.setUser(null)防止后续错误上报关联旧用户











