Cookie、SessionStorage与localStorage

Cookie

Cookie是为了解决HTTP无状态的一件产物，希望与特定用户相关的信息能够保存在用户的机器上，而HTTP协议并不能帮助我们实现这种功能，因此Cookie也就随之而诞生了出来。
Cookie实现原理：客户端请求服务器后，如果服务器需要记录用户状态，服务器会在响应信息中包含一个Set-Cookie的响应头，客户端会根据这个响应头存储Cookie信息。之后客户端向服务器发起请求时，都会携带一个名为Cookie的请求头信息，里面包含之前存储好的Cookie信息。

//响应头
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: username=jackson      //  Cookie值 都是通过URL编码的
...

// 请求头
GET /index.jsp HTTP/1.1
Cookie: username=jackson 
....

• 限制
  cookie是与特定域绑定的，设置Cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放，不被其他域访问。
  Cookie的一些限制：

• 不超过300个cookie;
• 每个cookie不超过4096字节；
• 每个域不超过20个cookie；
• 每个域不超过81920字节

每个域能设置的cookie总数是受限的，但不同浏览器的限制不同。

• 构成
  cookie在浏览器中是由以下参数构成的：

• 名称： 唯一标识cookie的名称；
• 值： 存储在cookie里的字符串值，这个值必须经过URL编码；
• 域： cookie有效域。
• 路径： 请求URL中包含这个路径才会吧cookie发送到服务器。
• 过期时间： 表示何时删除该cookie。默认情况不设置的话，浏览器结束会话就会自动删除，此时cookie存在内存中；设置过期时间后，cookie就会存储到磁盘上。
• 安全标识： 设置之后，只在使用SSL安全连接的情况下才会把cookie发送到服务器。

SessionStorage

sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭，存储在sessionStorage中的数据不受页面刷新影响。
因为sessionStorage对象与服务器会话紧密相关，所以在运行本地文件时不能使用。存储在sessionStorage对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处受限。
SessionStorage API：

setItem(name,value) 存储数据
clear() 删除所有值
getItem(name) 获取给定name的值
key(index) 取得给定索引位置的名称
removeItem(name) 删除指定name的名/值对

sessionStorage 对象主要用于存储只在会话期间有效的小块数据。

localStorage

如果需要跨会话持久存储数据，可以使用localstorage。
要访问同一个localStorage对象，页面必须来自同一个域、在相同的端口上使用相同的协议。
localstorage可以像sessionStore一样使用SessionStorage API。

区别

SessionStorage： 用于存储只在会话期间有效的小块数据。会话结束，自动清除。
localStorage ：存储在localStorage中的数据会保留到通过JavaScript删除或者用户清理浏览器缓存。不会因关闭窗口、标签页或重启浏览器而丢失。
Cookie： cookie可以通过设置存储时间定期清理，也可以不设置，当不设置时，与sessionStorage一样，会话结束后自动清理。Cookie需要通过请求头发送给浏览器，所以cookie存储的数据不宜过大，过大会导致性能问题。