Published on

浏览器缓存

Authors

localStorage：浏览器前端本地缓存，当页面关闭的时候，不会自动清空，可以存 5MB，且共享给其他标签一起使用

sessionStorage：会话级别的浏览器前端本地缓存，当会话关闭的时候（tab 页关闭），自动清空，且不共享给其他标签

cookie：前后端都可以使用的缓存，一般用来存储鉴权信息，或者用于分析用户习惯的相关数据，可以通过多个属性控制它（比如允许使用的接口域名/path 控制携带范围，是否允许前端读取 httponly，过期时间，优先级，安全相关的控制字段，httponly、secure等属性可以防止XSS攻击），有4KB大小限制且自动发送到服务器

IndexedDB：前端数据库，可以用来存储大型数据，比如离线应用存大量文档数据文档，支持索引，同时也带来了复杂性（如异步API、事务处理）

共同点：都是浏览器用来缓存数据的，受同源策略的保护

如何使用？

localStorage.getItem/setItem

sessionStorage.getItem/setItem

Cookie 的操作最好使用一个封装库，纯字符串不好处理

解决什么问题？

  1. localStorage 可以用来存一些系统/用户的默认配置数据（比如默认展示哪些模块）
  2. sessionStorage 可以用来存一些临时数据，即用即丢的（比如当前页面的草稿内容）
  3. Cookie 通过丰富的控制项，主要用来处理前后端的鉴权
  4. IndexedDB 可以处理大型数据

最佳实践

  1. Cookie 中的鉴权信息，一般通过后端配置，其通过多个配置项，不允许前端读取，不允许跨域的页面读取。当发出的接口请求不匹配 path 时，请求头中将不会携带对应的字段
  2. 注意存储的大小，一般都要转为 JSON 字符串后，再存
  3. 大数据用 IndexedDB，避免localStorage超5MB限制
  4. 会话级数据用 sessionStorage，减少内存占用
View on GitHub