本地存储
Contents
总结
| 特性 | cookie | localStorage | sessionStorage | indexDB |
|---|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置过期时间 | 除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一直存在 |
| 数据存储大小 | 4K | 5M | 5M | 无限 |
| 与服务端通信 | 每次都会携带在 header 中，对于请求性能影响 | 不参与 | 不参与 | 不参与 |
Cookie
Cookie原本用于解决HTTP无状态性导致的状态管理不足，一般只用来作为状态存储。
对于Cookie需注意安全性
| 属性 | 作用 |
|---|---|
| value | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |
| http-only | 不能通过 JS 访问 Cookie，减少 XSS 攻击 |
| secure | 只能在协议为 HTTPS 的请求中携带 |
| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击 |
缺点
- 容量缺陷，大小上限为4kb
- 性能缺陷，因为不管请求是否需要，每次请求都会携带完整的Cookie，
- 安全缺陷，以纯文本的形式传递，容易被非法用户截获，在
HttpOnly为false的情况下，Cookie信息可以直接通过js来获取。
应用场景：
- 会话管理，记录登陆、购物车、游戏得分或者服务器应该记住的其他内容。
- 个性化，记录用户偏好、主题或者其他设置。
- 追踪，记录和分析用户行为。
localStorage
持久性存储。
优点
- 容量大。localStorage 的容量上限为5M，当然这个 5M 是针对一个域名的，因此对于一个域名是持久存储的。
- 只存在客户端，默认不参与与服务端的通信。
- 接口封装。通过localStorage暴露在全局，并通过它的 setItem 和 getItem等方法进行操作。
应用场景
- 存储状态，基本信息等。
sessionStorage
会话性存储。生命周期是当前标签页关闭（即刷新页面还会存在，页面关闭不存在）。
优点
同localStorage
应用场景
- 可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。
- 存储本次浏览记录。
IndexedDB
运行在浏览器中的非关系型数据库。
优点：
- 储存空间没有上限。
- 异步操作
应用场景
1.存储base64的图片。