cookie、sessionStorage、localStorage的区别

 共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie 数据始终在同源的http 请求中携带（即使不需要），cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，可以限制cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。cookie 在所有同源窗口中都是共享的。cookie 只在设置的cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

 sessionStorage：sessionStorage 不会自动把数据发给服务器，仅在本地保存。仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持。（本身就是一个回话过程，关 闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 不会自动把数据发给服务器，仅在本地保存。始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。localStorage 在所有同源窗口中都是共享的。（同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

属性	cookie	webStorage
		sessionStorage	localStorage
最大内存	4KB	5M	5M
存储位置	存在电脑本地	保存在浏览器；浏览器或窗口关闭即消失	保存在客户端本地，在本地永久性存储
与浏览器交互	在浏览器和服务器间来回传递	不会自动发送数据给服务器	不会自动发送数据给服务器
有效期	在过期时间之前一直有效，即使窗口或浏览器关闭	数据在当前浏览器窗口关闭后自动删除	存储持久数据，浏览器关闭后数据不丢失除非主动删除
存储内容	键值对 name:value	存储的是key:value	存储的是key:value
其他	HTTP请求中cookie是明文传递，HTTPS中不是	调用方法： .getItem(key)读取key值 .setItem(key,value)保存key和value值 .removeItem(key)删除单个数据 .key(index)获取单个数据索引	调用方法： .getItem(key)读取key值 .setItem(key,value)保存key和value值 .removeItem(key)删除单个数据 .key(index)获取单个数据索引

cookie 的作用：

保存用户登录状态。例如将用户id 存储于一个cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一

样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。