JS—存储方式：1分钟掌握存储方式

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–Cookie
• 三–Web Storage
• 四–IndexDB
• 五–Cache Storage
• 六–总结

二. Cookie

2.1 是什么？ 浏览器用来保存信息的小文件
2.2 特点

• 容量小：最多存4kb(只能写几句话)
• 自动带在请求里面：每次请求服务器，浏览器都会自动把Cookie发给服务器(比如：自动传登录状态)
• 能设置有效期：可以设置几天过期，也可以设置关闭浏览器过期
• 安全选项：可以设置httpOnly(防XSS攻击)和Secure(仅https)
  用途：常用于会话管理、个性化设置。
  

三. Web Storage

1. localStorage： 持久化存储（除非手动清除），容量5-10M，数据跨会话保留
2. sessionStorage： 会话级存储(标签关闭就失效)，容量5-10M，数据仅在当前标签生效

四. IndexDB

1. 特点： 支持大规模数据存储，异步操作，数据查询。对标MySql
2. 用途： 离线应用，缓存大量数据

五. Cache Storage

1. ​特点： 与Service Worker配合，用于缓存网络请求。
2. ​用途： 离线资源缓存，提升性能。
   

六. 总结

存储方式	容量	有效期	自动传给服务器	典型用途
Cookie	4kb	可设置过期时机	自动带在请求头中	登录态，用户偏好
localStorage	5-10M	永久有效（除非手动删除）	不自动	长期保存的用户设置
sessionStorage	5-10M	当前标签页有效(关闭后失效)	不自动	临时数据
IndexDB	几百M	永久有效（除非手动删除）	不自动	离线应用，复杂的数据结构
CacheStorage	按需分配	可控制(需手动清理)	不自动	缓存网络资源

一句话选择指南
​- 想自动传数据给服务器 → 用 ​Cookie​（比如用户登录凭证）。
​- 想长期存用户设置 → 用 ​localStorage​（比如网页主题颜色）。
​- 存临时数据 → 用 ​sessionStorage​（比如填写到一半的订单）。
​- 存大量复杂数据 → 用 ​IndexedDB​（比如离线游戏进度）。
​- 优化网页加载速度 → 用 ​Cache Storage​（比如缓存图片和脚本）。