frontend-interview-playbook

Appearance

浏览器存储：Cookie、localStorage、sessionStorage、IndexedDB 与配额边界 ​

主题定位 ​

浏览器存储表面上像一组 API，对比时很多人会直接背容量和生命周期；但真正有区分度的回答，必须把它们放回“数据给谁读、何时失效、是否阻塞主线程、泄漏后果是什么”这四个维度里重新解释。

  • 浏览器存储表面上像一组 API，对比时很多人会直接背容量和生命周期；但真正有区分度的回答，必须把它们放回“数据给谁读、何时失效、是否阻塞主线程、泄漏后果是什么”这四个维度里重新解释
  • 同样一份数据，放到 Cookie、localStorage、sessionStorage 或 IndexedDB，最终影响的是请求链路、安全边界、多标签页一致性和离线能力
  • 这道题常常不是孤立出现，而是会继续连到认证、XSS、CSRF、页面生命周期、PWA 和 BroadcastChannel
  • 回答时如果只背数字，很快就会在“为什么不用另一个存储方案”这一层失稳

存储方案拆分 ​

Cookie 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 Cookie 的差异最终会体现在 内部机制、页面生命周期、运行时代价 这几个维度。 Cookie 讲清适用边界、失效条件和代价结构，结论才有技术含量。

localStorage ​

localStorage 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 localStorage 的差异最终会体现在 内部机制、页面生命周期、运行时代价 这几个维度。 localStorage 讲清适用边界、失效条件和代价结构，结论才有技术含量。

sessionStorage ​

sessionStorage 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 sessionStorage 的差异最终会体现在 内部机制、页面生命周期、运行时代价 这几个维度。 sessionStorage 讲清适用边界、失效条件和代价结构，结论才有技术含量。

IndexedDB ​

IndexedDB 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 IndexedDB 的差异最终会体现在 内部机制、页面生命周期、运行时代价 这几个维度。 IndexedDB 讲清适用边界、失效条件和代价结构，结论才有技术含量。

综合对比 ​

  • 同样一份数据，放到 Cookie、localStorage、sessionStorage 或 IndexedDB，最终影响的是请求链路、安全边界、多标签页一致性和离线能力
  • 这道题常常不是孤立出现，而是会继续连到认证、XSS、CSRF、页面生命周期、PWA 和 BroadcastChannel
  • 回答时如果只背数字，很快就会在“为什么不用另一个存储方案”这一层失稳
  • 适合服务端需要在每次请求里直接拿到的状态，例如 Session ID、某些偏好配置或受保护的刷新令牌
  • 真正重要的点在 HttpOnly、Secure、SameSite 这些属性，而不是 4KB 这个数字本身
  • 代价是它会参与网络请求，数据越多，请求头越重；同时如果是跨站自动携带，还必须考虑 CSRF

选型建议与边界 ​

  • 同样一份数据，放到 Cookie、localStorage、sessionStorage 或 IndexedDB，最终影响的是请求链路、安全边界、多标签页一致性和离线能力
  • 这道题常常不是孤立出现，而是会继续连到认证、XSS、CSRF、页面生命周期、PWA 和 BroadcastChannel
  • 回答时如果只背数字，很快就会在“为什么不用另一个存储方案”这一层失稳
  • 适合服务端需要在每次请求里直接拿到的状态，例如 Session ID、某些偏好配置或受保护的刷新令牌
  • 真正重要的点在 HttpOnly、Secure、SameSite 这些属性，而不是 4KB 这个数字本身

问答设计及延伸 ​

标准回答 ​

回答 浏览器存储：Cookie、localStorage、sessionStorage、IndexedDB 与配额边界 时，先定义 Cookie、localStorage、sessionStorage、IndexedDB 各自解决的问题，再比较它们在 内部机制、页面生命周期、运行时代价 上的差异，最后给出选型边界和工程代价。

追问拆解 ​

  • 浏览器存储：Cookie、localStorage、sessionStorage、IndexedDB 与配额边界 与“认证模型：Session、Cookie、Token 与前端存储边界”的边界关系
  • 浏览器存储：Cookie、localStorage、sessionStorage、IndexedDB 与配额边界 与“多标签页通信：storage、BroadcastChannel、SharedWorker 与一致性”的边界关系
  • 浏览器存储：Cookie、localStorage、sessionStorage、IndexedDB 与配额边界 与“页面生命周期与 bfcache：冻结、恢复与副作用管理”的边界关系
  • 跨标签页、跨域、多端协作场景下的结论变化
  • 维护成本上升后的优先级调整

容易失分的点 ​

  • 只给“哪个好”的结论，不先拆对象
  • 只报 API 或术语，不解释运行时行为和代价
  • 缺少真实场景，导致结论过度绝对

项目映射 ​

  • 结合真实系统说明 Cookie 到 IndexedDB 分别落在哪段链路
  • 补充未选方案的放弃原因和约束差异
  • 补充线上问题、治理动作和验证结果

相关主题 ​