浏览器的存储方式——cookie，localStorage，sessionStorage

---

一、cookies

一、概念

    cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件；目的是用于辨别用户身份。

    比如: 
    1, 用户登录的记住密码功能(下次再访问网站时无需输入密码了)；
    2, 购物车，加入购物车的商品没有及时付款，使用cookie保存后, 可以在一定时间后再访问网站, 会发现购物车里还有之前的商品列表;

HTTP是一个“无状态”协议，这意味着Web应用程序服务器在响应客户端请求时不会将多个请求链接到任何一个客户端。然而，许多Web应用程序的安全和正常运行都取决于系统能够区分用户并识别用户及其权限。

这就需要一些机制来为一个HTTP请求提供状态。它们使站点能够在会话期间对各用户做出适当的响应，从而保持跟踪用户在应用程序中的活动（请求和响应）。

二、cookie机制

（1）发布Cookie。当用户试图访问某Web站点中需要认证的资源时，Web服务器会检查用户是否提供了认证Cookie，如果没有，则将用户重定向到登录页面。在用户成功登录后，Web服务器会产生认证Cookie，并通过HTTP响应中的Set-Cookie头发送给客户端，用于对用户随后的请求进行检查和验证，接着将用户重定向到初始请求的资源 。
（2）检索Cookie。在用户随后的访问请求中，客户端浏览器检索Path和Domain等属性与用户请求资源相匹配的Cookie，并将找到的Cookie通过HTTP请求中的Cookie头提交给Web服务器 。
（3）验证CookieWeb服务器提取客户端浏览器递交的Cookie，验证其中的访问令牌。若合法，则将访问请求的资源发送给客户端浏览器；反之则拒绝用户的访问请求。Cookie 认证技术简化了用户访问 Web 网站资源的过程，即用户只需在初次登录网站时输入身份信息进行认证，随后便可以访问被授权的所有站点资源，不再需要重复手工提交身份信息 。
只有服务端能够写入cookie，Http在客户端JavaScript中，只有服务器端才能访问（读取或写入）Cookie。如果未设置Http Only标志，或者在（客户端）JavaScript中创建cookie，则可以在（客户端）JavaScript和服务器端读取和写入Cookie。

三、组成

转自：https://www.jianshu.com/p/2ceeaef92f20

除了名称和值之外，cookie也可以有其他更多的属性。浏览器发送到服务端的cookie不包含属性，只有键值对。cookie的属性被浏览器用来决定何时删除cookie，阻塞cookie或者是否发送cookie到服务端。

Domain和Path
Domain和Path属性定义了cookie的范围。本质上是告诉浏览器cookie属于哪个站点。为了明显的安全原因，cookie只能在当前资源的顶级域名或者子级域名上设置，不能再其他域名和对应的子级域名上设置。例如，example.org站点不能设置一个domain是foo.com的cookie，因为不会允许example.org站点去控制foo.com的cookie。

如果cookie的Domain和Path属性没有被服务端指定，它们默认是当前请求资源的domain以及path。然而，在大多数浏览器中，foo.com中的cookie没有设置domain和设置了domain属性是有区别的。在前一种情况下，cookie只会被发送foo.com的请求。在后一种情况下，所有的子域都会包含这个cookie(例如，docs.foo.com)，IE中这条规则是例外的，在IE中这两种情况cookie都会被发送给所有的子域。

下面就是一个用户登录之后站点发送的响应中包含Set-Cookie的例子。HTTP请求是发送到docs.foo.com子域的：

HTTP/1.0 200 OK
Set-Cookie: LSID=DQAAAK…Eaem_vYg; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly
Set-Cookie: HSID=AYQEVn…DKrdst; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly
Set-Cookie: SSID=Ap4P…GTEq; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly

第一个cookie，LSID没有Domain属性，有一个Path属性被设置成了/accounts。这告诉浏览器只有当请求页面包含在docs.foo.com/accounts下时才返回这个cookie。另外两个cookie，HSID和SSID，在浏览器请求任何.foo.com的子域的任何路径时都不会返回。签名的点在最新的标准是可选的。

Expires和Max-Age
Expires属性定义了一个指定的日期和时间，到了这个日期或时间时，浏览器应该删掉cookie。日期和时间的指定格式是Wdy, DD Mon YYYY HH:MM:SS GMT或者Wdy, DD Mon YY HH:MM:SS GMT，其中YY的值大于等于0小于等于69。

作为一种选择，Max-Age属性可以用来设置cookie的有效期，以相对于浏览器接收到cookie之后的秒数来计算。下面就是一个当用户登录之后从站点接收到的三个Set-Cookie头的例子：

HTTP/1.0 200 OK
Set-Cookie: lu=Rg3vHJZnehYLjVg7qi3bZjzg; Expires=Tue, 15 Jan 2013 21:47:38 GMT; Path=/; Domain=.example.com; HttpOnly
Set-Cookie: made_write_conn=1295214458; Path=/; Domain=.example.com```
Set-Cookie: reg_fb_gate=deleted; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/; Domain=.example.com; HttpOnly

第一个cookie，lu被设置在2013年1月15日过期。它会被浏览器一直用到那个设置的时间。第二个cookie，made_write_com没有设置有效期，所以它是个session cookie，当用户关闭浏览器时，会删除这个cookie。第三个cookie，reg_fb_gate值被改成了"deleted"，并且有一个过去的有效期。浏览器会删除这个cookie，因为它的有效期已经过去了。注意只有’Set-Cookie’中的domain和path属性匹配cookie被创建时的值时，才能被删除。

Secure和HttpOnly
Secure和HttpOnly属性没有关联的值。相当于只要显示了他们的属性名就表示支持他们的行为。

Secure属性意味着把cookie通信限制在加密传输中，指示浏览器只能通过安全/加密连接使用cookie。然而如果一个web服务器在非安全连接中给cookie设置了一个secure属性，这个cookie在发送给用户时仍然可以通过中间人攻击拦截到。因此，为了安全必须通过安全连接设置cookie的Secure属性。

HttpOnly属性指示浏览器除了HTTP/HTTPS请求之外不要显示cookie。这意味着这种cookie不能在客户端通过脚本获取，因此也不会轻易的被跨站脚本窃取。

二、sessionStorage、localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage 。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。（摘自百度百科）
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage的作用及用法
例如：搜索历史的保存

sessionStorage的作用及用法
例如：自动定位到上次的页面浏览位置

sessionStorage.getItem('username');
sessionStorage.removeItem('username');
sessionStorage.clear();

---

总结

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生