1.Cookie
1.1背景
Cookie的设计初衷是为了弥补HTTP在状态管理上的不足：HTTP是一个无状态协议，客户端向服务器发请求，服务器返回响应，但是下次发送请求时服务器无法记录客户端是谁。
1.2 概念
本质上是浏览器内存储的一个很小的文本文件，内部以键值对的方式来存储。客户端向同一个域名下发送请求，都会携带相同的Cookie，服务器收到Cookie并进行解析，便能拿到客户端的状态。
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。
1.3 作用与缺陷
作用:
- 会话状态管理（用户登陆状态、购物车、游戏分数等）
- 个性化设置（用户自定义设置、主题等）
- 浏览器行为跟踪（跟踪分析用户行为等）
若干缺陷：
- 容量缺陷：Cookie体积上限4KB，只能存储少量信息
- 性能缺陷：Cookie紧跟域名，不论域名下某地址是否需要该Cookie，请求都会携带完整的Cookie。随着请求数增多，造成性能浪费。
- 安全缺陷：由于Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，在Cookie的有效期内重新发送给服务器。当HttpOnly为false情况下，Cookie甚至可以直接通过JS脚本获取。
1.4 属性
- value: cookie值，如果用于保存用户登录态，应该将该值加密
- http-only： 不能通过js访问Cookie。设置为true可以减少XSS攻击
- secure： 表明该Cookie只能在https请求中携带，设置为true可以使得cookie不会被抓包工具窃取。
- same-site： 规定浏览器不能在跨域请求中携带 Cookie，设置为strict（严格模式，在任何情况下都不能被第三方使用）或者lax（宽松模式，如果这个请求是个 GET 请求，并且这个请求改变了当前页面或者打开了新的页面，那么这个cookie可以作为第三方cookie）可以减少CSRF攻击。
- expires： 通常，cookie的有效期是永久或者是一个较长的数值；如果把该属性设置为-1，那么cookie就只保存在客户端内存中，当浏览器关闭cookie即失效，也可以有效防御cookie信息被窃取。
还可以通过加密cookie；用户第一次登录时，保存ip+cookie加密后的token，每次请求，都去将当前cookie和ip组合起来加密后的token与保存的token作对比，只有完全对应才能验证成功等方法来加强cookie安全性。
2.localStroage
2.1 与Cookie异同
同：
针对一个域名，同一个域名下，会存储相同的一段localStroage
异：
- 容量：针对每个域名容量上限为5M，相对于一个域名持久存储，远大于Cookie的4K。
- 位置：只存在于客户端，不参与和服务端的通信，避免了Cookie的性能缺陷和安全缺陷
- 接口：通过localStorage暴露在全局，并可以通过它的 setItem 和 getItem等方法进行操作
2.2 操作
let obj = {
objName: 'lebron',
objAge: '37'
}
localStorage.setItem('name','curry');
localStorage.setItem('info',JSON.stringify(obj))
let playerName = localStorage.getItem('name')
let playerInfo = JSON.parse(localStorage.getItem('info'))
console.log(playerName,playerInfo)
可以看出，localStroage存储的都是字符串，如果是存储对象需要用到JSON的stringify()将对象转换为字符串，要将字符串转换为对象则通过JSON.parse()方法。
2.3 应用场景
由于localStroage的较大容量和持久特性，可以利用其存储一些内容稳定的资源，如：官网的logo,存储Base64格式的图片资源等
3. sessionStroage
3.1 和localStroage异同
同：
- 容量上限相同，为5M
- 只存在客户端，不参与服务端通信
- 接口封装。除了名字要改一下，存储方式、操作方式均和localStroage相同
异：
sessionStroage只是会话级别的存储，并非持久化存储，关闭页面后，这部分sessionStroage就不存在了。
3.2 应用场景
- 对表单信息进行维护，将表单信息存储在里面，可以保证即使页面刷新也会保留之前的表单信息
- 存储本次浏览记录。当关闭页面后不需要这些记录时，就很适合使用。
4.总结
生命周期：
- Cookie:可设置失效时间，未设置的话，默认是关闭浏览器后失效
- localStroage：除非被手动清除，否则永久保存
- sessionStroage：仅在当前网页会话下有效，关闭页面后会被清除
存储容量：
- Cookie：一个域名一般能存20个，每个容量为4KB
- ls\ss:5MB
http请求：
- Cookie：每次都携带在HTTP头中
- ls/ss：仅在客户端（浏览器）中保存，不参与和服务器的通信
易用性：
- Cookie：原生接口不友好，需要程序员自己封装
- ls/ss：原生接口也可接受
总之，Cookie浪费带宽，而且不能跨域，除了识别用户登录以外，能不用就不用。其它情况下，能用stroage就用stroage。localStroage可以跨页面传参；sessionStroage用来保存一些临时数据，防止用户刷新页面后丢失参数。