JS中 Cookie、 LocalStorage 与 SessionStorage

一、基本概念

1. Cookie

cookie：主要用途有保存登录信息。cookie 非常小，它的大小限制为4KB左右。
用途：比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

2. LocalStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

3. SessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

二、区别

特性	Cookie	LocalStorage	SessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

LocalStorage和SessionStorage：

1. 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。
2. 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。
3. 这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个 iframe 标签且他们属于同源页面，那么他们之间是可以共享 sessionStorage 的

三、LocalStorage 和 SessionStorage 的操作

LocalStorage 和 SessionStorage 具有相同的操作方法，例如setItem、 getItem 和 removeItem 等

1. 添加value

描述：使用 key/value 的形式将数据存储进本地存储中
格式：

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

2.获取value

描述：获取指定 key 本地存储的值
格式：

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

3.删除value

描述：删除指定 key 本地存储的值
格式：

sessionStorage.removeItem("key");
localStorage.removeItem("site");

4.清除value

描述：清除所有的 key/value
格式：

sessionStorage.clear();
localStorage.clear();