Cookie，localStorage，sessionStorage

Cookie

cookie是服务器向用户浏览器发送的一小块数据，保存在用户的电脑中，cookie会在下一次浏览器向同一个服务器发送请求的时候随请求一起被发送至服务器。使用它可以告知服务器两次请求是否来自同一个浏览器，可以实现保持用户登录状态等功能。

创建cookie

服务器收到http请求后，在响应头中添加Set-Cookie选项并添加信息。cookie一般是是以键值对的形式存在。比如下面这个响应头。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[页面内容]

之后，如果浏览器再次向该服务器发起请求，则会在请求头中附带上cookie信息。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

cookie生命周期

默认情况下，浏览器关闭后cookie就会被删除，这种情况下我们没有指定过期时间（expires）或者说是（Max-Age）。某些包含会话回复功能的浏览器会保存这种cookie，延长它的生命周期。
通过指定过期时间，可以长久的保存cookie。将cookie的过期时间设定为过去可以立即删除cookie。

下面就是一个设定了过期时间的cookie。cookie的过期时间需要设置为GMT格式。

Set-Cookie: id=a3fWa; Expires=Mon, 3 Oct 2022 07:28:00 GMT;

限制访问

为保证cookie在传输过程中的安全性，可以使用Secure和HttpOnly属性。

Secure属性可以让cookie只经过被https加密后的请求进行发送。但也并非绝对安全的措施。

HttpOnly属性可以让JavaScript的Document.cookieAPI无法访问cookie信息，对于保持和服务端对话的cookie来说，没有必要让将它们的信息暴露给JavaScript代码，这样做还可以防范XSS（跨站点脚本攻击）。

比如

Set-Cookie: id=a3fWa; Expires=Mon, 3 Oct 2022 07:28:00 GMT; Secure; HttpOnly

作用域

作用域是设置可以向哪些URL发送cookie的选项。通过Domain和path属性来进行设置

Domain指定哪些主机可以接收cookie，如果不指定则默认只对其本身有效，子域名均不可读取cookie。指定之后，则其下的所有子域名都可以接收cookie。

path使用/进行路径分割。如果设置path = /doc则下面所有地址都可以接收cookie

/doc
doc/Web
doc/Web/http

cookie的特性和使用场景

特性：

cookie创建成功后名称无法再修改。
cookie无法跨域名，这个在cookie的定义的时候已经说明了，这是符合cookie的本意的。
同一域名下不能设置超过20个cookie，每个cookie的大小不能超过4kb。

如果非要跨域名共享cookie，可以使用Nginx反向代理（正向代理代理客户端，反向代理则代理服务器），或者登录一个网站后向另一网站写cookie。

使用场景：

保持用户登录状态
统计页面点击次数

localStorage

当数据量较大且不需要频繁在浏览器和服务器之间来往的时候，就可以使用localStorage。

localStorage的出现解决了cookie存储数据的许多难点

大小限制为5MB，比cookie容量大，能够存储更多的信息。
直接存储在本地，除非用户主动清理否则一直有效。
仅在本地存储，不会在每次发送请求时被携带。

当然也有一些问题。

受到同源策略的限制。必须是同一协议、域名和端口下的站点才能访问。
浏览器兼容问题，IE8以下不兼容。（因为是HMLT5提出的新规范，IE的时代已经结束咧！）
隐私模式下的浏览器无法读取。

常用API

//保存数据
localStorage.setItem('name', 'value')
//读取数据
let data = localStorage.getItem('name')
//删除数据
localStorage.removeItem('name')
//清除所有数据
localStorage.clear()
//获取指定索引值数据
localStorage.key(index)

sessionStorage

sessionStorage是和localStorge一起提出来的客户端存储策略。

sessionStorage和localStorage的最大的不同之处在于“短命”。虽然二者都是在本地存储数据，但是一旦页面或者浏览器关闭，sessionStorage的数据就会被清除。如果是因为浏览器崩溃而关闭的页面的话，它还可以恢复页面，但这得取决于浏览器是否支持。

sessionStorage也受到同源策略的限制，并且附加上一条更加严格的限制，必须是同一浏览器下的同一个页面才能共享sessionStorage下的数据。

sessionStorage和localStorage的API基本相同。

应用场景

由于是临时会话信息存储，所以经常用来保存网站的游客登录或者浏览信息。

Cookie，localStorage，sessionStorage