Cookie
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储并且作为客户端与服务器交互的通道，保持客户端状态。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。注意,每次发送请求都会自动携带对应域名的cookie
使用场景
- 记录登陆的账号和密码。
- 购物车功能。
- 记录用户浏览数据，进行商品（广告）推荐。
Cookie属性
| 属性 | 作用 |
|---|---|
| Name | cookie的名字，Cookie一旦创建，名称便不可更改(加密) |
| Value | Name所对应的cookie的值(加密) |
| Domain | 可以访问该Cookie的域名。例如document.cookie='domain=.baidu.com'，则所有以“baidu.com”结尾的域名都可以访问该Cookie |
| Path | 该Cookie的使用路径。path=/，说明本域名下contextPath都可以访问该Cookie。path=/app/，则只有contextPath为“/app”的程序可以访问该Cookie |
| Expires | Cookie过期时间 |
| HttpOnly | 不允许使用脚本更改、获取整个cookie,防止跨域脚本 (XSS) 攻击 |
| Secure | 只有使用Https协议时才会携带此cookie |
| Same-site | 规定浏览器不能在跨域请求中携带Cookie,减少CSRE攻击 |
Cookie的原理
第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会在响应头里面添加一个Set-Cookie选项，将cookie放入到响应请求中，在浏览器第二次发请求的时候，会通过Cookie请求头部将Cookie信息发送给服务器，服务端会辨别用户身份，另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的生成方式
- 方式一：在 http的响应头中设置set-cookie
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2018 07:28:00 GMT Secure ;
默认情况下，domain被设置为Cookie页面当前访问地址中的主机部分，我们也可以手动设置 domain 的值，如document.cookie='domain=.a.com',那么他的子域名a.a.com或b.a.com都可以访问的此cookie
- 生成方式二：利用js可以通过document.cookie可以读写cookie，以键值对的形式展示
document.cookie="userName=hello"
Cookie缺点
- 容量问题：Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。
- 性能问题：Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带 Cookie。请求一张图片或者一个 CSS 文件不需要 Cookie 里存储的信息，带来了巨大的开销。
- 安全问题：在客户端可以通过一定的手段（脚本、devtools,本地存储的文件）获取到，存在XSS，CSRF等安全问题。
解决安全问题的策略
- 设置HttpOnly属性，浏览器不允许脚本操作document.cookie， 所以为避免跨域脚本 (XSS) 攻击，Js的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。
- 添加Secure属性，这样的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。
Local Storage
特点
- 持久化的本地保存，永不过期，除非手动删除
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好 基于上面的特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)。
API
window.localStorage.setItem()
window.loaclStorage.getItem()
使用场景
考虑到 LocalStorage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串,如网站logo
作用域
Local Storage遵守同源策略，只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
Session Storage
特点
- 会话级别的浏览器存储
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好
API
window.sessionStorage.setItem()
window.sessionStorage.getItem()
使用场景
sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话，当你开启新的会话时，它也需要相应的更新或释放。比如微博的 sessionStorage就主要是存储你本次会话的浏览足迹：
作用域
Session Storage遵守同源策略，但是比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
LocalStorage和Session缺点：
- 都只能存储为字符串
- 只能存储少量简单的数据
总结：
Cookie是客户端机制，session是服务器端机制
参考连接
