html5 高级系列：web storage

前言

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

构造函数

在实际项目中，可能需要多次对 localstorage 进行操作，我们可以通过一个构造函数来更好的操作。

示例：

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，可以通过右键进行编辑或删除等。