一、基本概念

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 的操作

LocalStorageSessionStorage 具有相同的操作方法,例如setItemgetItemremoveItem

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();

一个好奇的人