前言
HTML5的web Storage存储方式有两种：localStorage和sessionStorage。
这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。
localStorage的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage保存在session对象中，会在浏览器关闭时被清除。
web Storage的大小在浏览器上是有限制的，不同浏览器大小会有区别，在主流浏览器中，大小约为5M，用来存储普通数据其实已经足够。
用法
以localStorage为例，sessionStorage用法一样：
setItem
保存数据：localStorage.setItem(key,value);
示例：
localStorage.setItem('name','Hello World');
当key相同时会覆盖之前的value，用于修改数据。如果value为对象，需转为json字符串，否则你读取出来的将会是[object Object]
getItem
读取数据：localStorage.getItem(key);
示例：
localStorage.getItem('name'); // Hello World
removeItem
删除单个数据：localStorage.removeItem(key);
示例：
localStorage.removeItem('name');
localStorage.getItem('name'); // null
删除key为name的数据后，loaclStorage里已经获取不到该数据，则返回null;
clear
删除所有数据：localStorage.clear();
示例：
localStorage.clear();
此时会把localStorage中的所有数据都删除。
key
得到某个索引的key：localStorage.key(index);
示例：
localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1); // name2
获取到索引为1的key，即name2。
构造函数
在实际项目中，可能需要多次对localStorage进行操作，我们可以通过一个构造函数来更好的操作。
更多资料免费分享加群 120342833 验证回答 ZZ
示例：
var localEvent = function (item) {
this.get = function () {
return localStorage.getItem(item);
}
this.set = function (val) {
localStorage.setItem(item, val);
}
this.remove = function () {
localStorage.removeItem(item);
}
this.clear = function () {
localStorage.clear();
}
}
//使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');
local1.set('Hello World');
local2.set('Hello Linxin');
local1.get(); // Hello World
local2.get(); // Hello Linxin
这里只是简单的演示，像我们平时在项目中可能要把对象存储起来，就需要在代码里做些处理。
监听storage事件
可以通过监听window对象的storage事件并指定其事件处理函数，当页面中对localStorage或sessionStorage进行修改时，则会触发对应的处理函数。
window.addEventListener('storage',function(e){
console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
触发事件的时间对象（e参数值）有几个属性：
key :键值。
oldValue :被修改前的值。
newValue :被修改后的值。
url :页面url。
storageArea :被修改的storage对象。
注意：在谷歌浏览器中，需要在不同标签页中修改storage才会触发该事件，即 网页A监听该事件，在 网页B中修改localStorage，则 网页A会触发事件函数。但是在IE中，在同个网页修改localStorage都会触发该事件。
调试
谷歌浏览器自带调试工具(chrome devtools)非常好用，可以用来调试localStorage和sessionStorage。打开浏览器按f12调出调试工具，可以看到Application，点击打开可以看到左边栏有Storage，包括了localStorage、sessionStorage、IndexedDB等，选中我们要调试的网站域名，可以看到右边有对应的key和value，可以通过右键进行编辑或删除等。
兼容
IE8以上就兼容，但是比较特别，需要在服务器上打开的才支持，直接双击打开文件的file://是不兼容的。
到了IE11才支持file://下打开的，其他浏览器的支持程度都很高，包括在手机上的兼容。具体兼容可查看：http://caniuse.com/#search=localstorage
v�y���O
网友评论