打开浏览器开发者工具，经常会看到 Cookies、Local Storage、Session Storage、IndexedDB、Cache Storage 一整排。第一次看很容易产生一个疑问：我只是打开了个网页，你到底在我浏览器里租了多少仓库？
网站确实需要保存一些状态。否则每打开一个新页面，它都可能像失忆一样重新问“你是谁”。
Cookie：会跟服务器来回跑的小纸条
Cookie 最经典的用途是会话和登录状态。服务器登录成功后可能设置一个会话标识，浏览器后续访问同一站点时按规则自动带上 Cookie。服务器看到这个标识，就能把请求和已有会话对应起来。
Cookie 也可以用于偏好设置、统计或广告追踪，所以它经常和隐私讨论绑在一起。但“Cookie = 跟踪器”同样过于粗暴。很多必要 Cookie 不存在，网站连最基本的登录都维持不了。
LocalStorage：长期放在浏览器里的小柜子
LocalStorage 不会像 Cookie 那样自动跟着每次 HTTP 请求发送。网页 JavaScript 主动读写它，常见用途包括主题、语言、页面偏好和某些非敏感状态。
它通常会一直保留，直到网站或用户主动删除。因此“关掉浏览器再打开还在”很正常。
SessionStorage：标签页级临时储物格
SessionStorage 的 API 和 LocalStorage 很像，但生命周期更短，通常与当前标签页会话绑定。关掉标签页后，这些数据通常就会消失。
它适合保存临时表单、当前步骤或只在一次浏览流程里需要的状态。
一张最省脑子的对照
- Cookie：可按规则自动随请求发送，常用于会话。
- LocalStorage：长期保存在浏览器，JavaScript 主动读取。
- SessionStorage：当前标签页临时保存，关闭后通常消失。
为什么不该把密码直接塞进 LocalStorage
页面 JavaScript 可以读取 LocalStorage。如果站点存在 XSS 漏洞，注入脚本也可能读取其中内容。因此长期 Token、密码、私钥一类高敏感信息不能因为“存在本地”就自动变安全。
认证 Cookie 还可以配合 HttpOnly、Secure、SameSite 等属性限制脚本读取、非 HTTPS 发送和跨站行为。这些属性不是万能盾牌，但能建立更合理的边界。
为什么清理浏览器数据会把我登出
因为你清掉的不一定只是“缓存垃圾”，还可能包括 Cookie、LocalStorage、IndexedDB、Service Worker 数据等。登录会话的钥匙一起被删了，网站当然只能重新认证。
PWA 为什么尤其依赖站点存储
PWA 为了做到接近 App 的体验，可能同时依赖 Service Worker、Cache Storage、IndexedDB、Cookie 或 LocalStorage。于是“登录能不能保持一周”“离线还能不能打开”“升级后为什么还是旧页面”往往都和浏览器存储有关。
需要在手机上确认这些存储到底发生了什么，可以继续看手机网页怎么真正看到控制台和站点存储。