（一） localStorage与sessionStorage（浏览器）
| （1） localStorage（客户端浏览器） | （2） sessionStorage（客户端浏览器） | |
|---|---|---|
| 生命周期 | 关闭浏览器后数据依然保留 永久存储，除非手动清除，否则一直在 | 关闭浏览器或者标签后即失效 |
| 作用域 | 相同浏览器的不同标签在同源情况下可以共享（例如：同一网站的不同页面可以共享） | 只在当前标签可用，当前标签的iframe中且同源可以共享 |
| 存储 | 5M+ | 5M+ |
[ 延伸问题 ]
（1）localstorage 怎么存储图片⭐⭐⭐⭐
- 创建一个canvas对象，把图片保存在 canvas 中，然后 canvas 对象
toDataUrl,在把 dataurl 数据存储在 localstorage 中。 - 或者使用blob 二进制流 存储，canvas 对象toBlob
（2）如何实现 localstorage 定时清除⭐⭐⭐⭐
- 自己重写一个 set 方法，内部逻辑就是添加一个现在的时间以及有效时长
- 再重写一个 get 方法，每当 get 的时候先进行判断是否过期
如果过期就删除，并返回 null，没过期的话正常返回
（二）cookie（客户端）
一开始cookie 不是用来存储的，而是为了弥补 http 的状态的不足，http 是无状态协议。每当向服务器发起请求、请求结束，下次发送请求的时候服务端就不知道是谁了，所以 cookie 是用来弥补这个不足的
1. cookie 的生命周期：
- cookie 是保存在客户端的，一般由 server 设置值及过期时间
- cookie 没有提供删除的 API，如果想要删除的 的话可以把
max-age 设为0或者把expire 设置为当前时间（立刻过期）即可
2. cookie 的缺陷
| 标题 | |
|---|---|
| ① 容量缺陷 | cookie 的存储空间只有4KB |
| ② 性能缺陷 | 有时候 cookie 我们用不到，但是不管用不用得到，http 在发送请求的时候一定会带着 cookie，这就造成了性能的浪费 |
| ③ 安全缺陷 | cookie 在 http 下很容易被非法用户获取。尤其是设置了 http-only 为 false 的情况下，这个时候 js 可以读取到 cookie，很容易受到 xss攻击。 |
3. cookie 的属性
| 属性值 | 解释 |
|---|---|
| http-only | 为true时，不能被客户端更改访问，防止 XSS 攻击 |
| max-age | 生效后存活的时间 |
| Secure | 是否只允许在 https 下传输 |
| expire | 过期时间 |
（三）session（服务端）
- 作用域：session 是保存在服务端的
- session 的运行依赖 sessionId，sessionId 又保存在 cookie 中，
所以禁用了 cookie之后 session 也是用不了的 如果硬要用也可以，可以把 sessionId 存储在 url 中 - session一般是用来跟踪用户状态的
- session 比较安全，因为存储在服务器中
不过为了减少服务端的压力，很多信息还是推荐存在 cookie 中的
[ 问题回顾 ]
-
1. localStorage、sessionStorage、cookie、session 之间有什么区别⭐⭐⭐⭐⭐
-
2. localStorage与sessionStorage的区别？
-
3. 怎么删除cookie？
-
4. cookie有什么缺陷？3个
-
5. Cookie、sessionStorage、localStorage 的区别
