Web Storage

Web Storage 分为本地存储和会话存储，不能跨域访问。

Web Storage 使在不影响网站性能的情况下存储大量数据成为可能。

注意：Web Storage 存储的是字符串，获取和存储时别忘了用 JSON.stringify() 和 JSON.parse() 对非字符串类型数据做相应的转换。

 

一、localStorage

本地存储(localStorage)：长时间的保存在电脑本地。

单个域名容量上限为5M。

应用场景

利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源。

二、sessionStorage

会话存储(sessionStorage)：只限于当前页面，当前页面关闭，数据就清除了。

容量上限也为 5M。

应用场景

1. 可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。
2. 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

三、Storage API

localStorage 和 sessionStorage API一样，最常用的是这几个：

1.getItem(key);获取指定key本地存储的值

 2.setItem(key,value);将value存储到key字段

 3.removeItem(key);删除指定key本地存储的值

 4.clear();清除所有的本地存储

 5.length;读取本地存储的键值对个数

 6.key(i);读取本地存储第 i 个 key 的名称，i 从0开始

 7.storage事件：当本地存储的数据发生变化时会触发此事件，包含的属性有：

storageArea: 表示存储类型（Session或Local）

key:发生改变项的key

oldValue: key的原值

newValue: key的新值

url*: key改变发生的URL

* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没

有url属性，则应该使用uri属性。

如果调用clear()方法，那么key、oldValue和newValue都会被设置为null。

PS：在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是

同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的

storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件。

var arrDisplay = [0, 1, 1, 1];

//存储，IE6~7 cookie 其他浏览器HTML5本地存储
if (window.localStorage) {
    localStorage.setItem("menuTitle", arrDisplay);	
} else {
    Cookie.write("menuTitle", arrDisplay);	
}

var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");	

strStoreDate.split(",").forEach(function(n, i) {
    //n是当前的值，i是当前的下标。
});

 

var storage = window.localStorage;  
for (var i=0; i < storage.length; i++){  
    var key = storage.key(i);  
    var value = storage.getItem(key);  
    console.log(key + "=" + value);  
}  

从 2017.10.17 起，W3C规定可以以添加对象属性的方式给 Storage 存值

存储效果是一样的：

localStorage.name = 'Jim';
// 等效于
localStorage.setItem('name', 'Jim')

取值，如果有值效果是一样的，如果没值，返回值会有所不同

localStorage.name; // Jim
localStorage.getItem('name'); // Jim
localStorage.age; // undefined
localStorage.getItem('age'); // null