HTML5-localStorage应用

localStorage支持

支持localStorage的浏览器类型

判断浏览器是否支持localStorage

判断浏览器是否支持，可以使用如下代码：

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

localStorage读写

localStorage提供了setItem 、 getItem 、 getKey 、 removeItem 、 clear 方法。看名字应该就能知道如何使用。

localStorage事件

HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

StorageEvent对象中的属性，如下表中描述：

本页面内监听localStorage变更监听实现

StorageEvent在使用过程中，当数据发生变化时本页是监听不到storage事件变更消息的。而同域的其他打开的页面反而监听到了该消息。因此，有大牛重新封装了localStorage方法，从而实现了本页面内的localStorage变更监听。

• 重新生成一个对象，包装localStorage原生方法：

var Storage = {
        setItem : function(k,v){
        　　localStorage.setItem(k,v);
        　　......
        },
        removeItem : function(k){
        　　localStorage.removeItem(k);
               .......
        },
        getItem :
            ...
      }

• 在能引起storage变更时间的操作接口中，手动触发StorageEvent事件：

比如removeItem的实现中，你就需要初始化并触发StorageEvent事件：

var se = document.createEvent("StorageEvent");
se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage);
window.dispatchEvent(se);

• 通过自封装的Storage对象操作，并在当前页监听：

window.addEventListener("storage",function(e){
     console.log(e);
},false);

Storage.addItem('test','小朋友爱吃糖');

使用注意事项

1. localStorage会自动将所有存储的对象转为字符串，如果你存进去的是数字，需要使用number或者parseInt 转换一下
2. localStorage标准是每个域名下5M的存储空间，如果超过了，系统会自动清空最早存储的数据。
3. 如果想要在localStorage中存储json格式的数据，需要使用 JSON.stringify 将json转换成字符串，然后读取出来的时候，使用JSON.parse 将字符串重新转换成json数据格式。

参考内容

[1] http://www.cnblogs.com/cczw/p/3196195.html
[2] http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html