一、cookie

简介

Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。一般记住密码，下次自动登录，购物车功能，记录用户浏览数据，进行商品（广告）推荐等场景下使用~（现在基本大多数登录的合法性验证都是用cookie验证的）。

优点

优点：兼容性最好，几乎所有的浏览器都支持

缺点

1、Cookie 存储空间小，仅为4kb；
2、过多的 Cookie 会带来巨大的性能浪费
因为Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带 Cookie。
3、由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS

简而言之就是：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的

二、web Storage

1、简介

Web Storage 是对 Cookie 的拓展。
Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。

特点：

提供一种在cookie之外存储会话数据的途径。
提供一种存储大量可以跨会话存在的数据的机制。

2、localStorage

特点

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。

优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。

3、sessionStorage

特点

（1）页面刷新不会消除数据;
（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；
（3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互

缺点：只能作为临时存储，不能存储持久化

三、 cookie，localStorage和sessionStorage共同点

1、都是保存在浏览器端，且都遵循同源策略
2、只能存储字符串

四、不同点

1、生命周期

localStorage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除。

sessionStorage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。

cookie 如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里；如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。

2、作用域

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（当前同一个源下面的只要有一个窗口没关或者跳到另外的窗口，sessionStorage都会存在）。

Cookie有两个很重要的属性:Domain和Path，用来指示此Cookie的作用域：Domain要求浏览器当前要添加的Cookie的域名归属，如果没有明确指明则默认为当前域名；Path告诉浏览器当前要添加的Cookie的路径归属，如果没有明确指明则默认为当前路径。
要求（1）当前域名或者父域名下的Cookie（2）当前路径或父路径下的Cookie