Cookie、SessionStorage和LocalStorage

HTML4的本地存储 cookie

      浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie、session等和服务器端进行数据交互

Cookie

       cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

       Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。

HTML5的本地存储

       sessionStorage和localStorage属于Web Storage，是对cookie存储机制的一个改善。

       sessionStorage：将数据保存在session对象中。sessionStorage生命周期为当前窗口或标签页面，它仅仅适用于浏览器会话的持续时间，换句话说当标签或者窗口关闭的时候，sessionStorage将会被删除。通过sessionStorage存储的数据也就被清空了。

       localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）上，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。除非自己清除了localStorage的内容，不然localStorage存储的信息将永久存在。

 

Cookie、SessionStorage和LocalStorage的区别：

共同点： 都是保存在浏览器端，并且是同源的（URL的协议、端口、主机名是相同的，只要有一个不同就属于不同源）

不同点：

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有path的概念，可以限制cookie只属于某个路径下。

2、cookie数据不能超过4k，而sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以到5M或更大

3、sessionStorage仅仅在当前浏览器窗口关闭之前有效；localStorage始终有效，窗口或者浏览器关闭之后也一直保存，因此作用持久数据；而cookie，只在设置cookie过期时间之前有效，即使窗口关闭或者浏览器关闭。

4、sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面，localStorage在所有的同源窗口中是共享的，cookie也是在所有同源的窗口中共享的。

5、webStorage支持事件通知机制，可以将数据更新的通知发送给监听者。

6、webStorage的api接口使用更方便。