cookies，sessionStorage和localStorage的区别

基础概念：

cookies：是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。可以将第一次请求的数据直接存储到本地，最大容量为 5M。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，导致页面卡顿。localStorage 只能以字符串的形式存储，其他类型的数据则会报错。

1. localStorage 的存储方法

//字符串
var userName = 'John';
localStorage.setItem('userName', userName);
//json 形式
var userInfo = {
"name": 'John',
"age": 25,
"gener": 'male'
};
localStorage.setItem('userInfo', JSON.stringify(userInfo));

2.localStorage 的获取

　localStorage.getItem('userName');
　localStorage.getItem('userInfo');

3. localStorage 的删除

//删除指定 localstorage
　localStorage.removeIte
//清除所有 localstorage
　localStorage.clear();

sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。换言之，sessionStorage 的生命周期只存在于页面打开时，当浏览器或当前页面关闭后，sessionStorage 将被删除。

1. sessionStorage 的存储
sessionStorage 存储的数据类型依然是字符串，与 localStorage 用法相同。
2. sessionStorage 的获取
同 localStorage 存储。
3. sessionStorage 的删除
同 localStorage 删除。

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

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

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。