HTML5-localStorage应用

矫情吗；* 2022-09-23 03:51 216阅读 0赞

## localStorage支持 ##

### 支持localStorage的浏览器类型 ###

![这里写图片描述][20160704105159471]

### 判断浏览器是否支持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对象中的属性，如下表中描述：

![这里写图片描述][20160704110120226]

## 本页面内监听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][http_www.cnblogs.com_cczw_p_3196195.html]  
\[2\] [http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html][http_www.cnblogs.com_xiaowei0705_archive_2011_04_19_2021372.html]

[20160704105159471]: /images/20220721/02e452500e3746a39a398f70e9f7689f.png
[20160704110120226]: /images/20220721/94af3d8f4fb94a8cabf37939c1585be0.png
[http_www.cnblogs.com_cczw_p_3196195.html]: http://www.cnblogs.com/cczw/p/3196195.html
[http_www.cnblogs.com_xiaowei0705_archive_2011_04_19_2021372.html]: http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html