H5 js 处理localstorage方法封装

李说：

（已验证，可以直接用于开发中。）

在移动端开发中，我们未来将一根页面的数据带到另外一个页面中，需要将数据临时存放到缓存中，这时我们就用到了localstorage,相当于pc端的cookie和服务器的session一样。

 <script>

 /*

存储localstorage时候最好是封装一个自己的键值，在这个值里存储自己的内容对象，

封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。

*/

var mystorage = (function mystorage(){

    var ms = "mystorage";

    var storage=window.localStorage;

    if(!window.localStorage){

        alert("浏览器不支持localstorage");

        return false;

    }

    var set = function(key,value){

        //存储

        var mydata = storage.getItem(ms);

        if(!mydata){

            this.init();

            mydata = storage.getItem(ms);

        }

        mydata = JSON.parse(mydata);

        mydata.data[key] = value;

        storage.setItem(ms,JSON.stringify(mydata));

        return mydata.data;

    };

    var get = function(key){

        //读取

        var mydata = storage.getItem(ms);

        if(!mydata){

            return false;

        }

        mydata = JSON.parse(mydata);

        return mydata.data[key];

    };

    var remove = function(key){

        //读取

        var mydata = storage.getItem(ms);

        if(!mydata){

            return false;

        }

        mydata = JSON.parse(mydata);

        delete mydata.data[key];

        storage.setItem(ms,JSON.stringify(mydata));

        return mydata.data;

    };

    var clear = function(){

        //清除对象

        storage.removeItem(ms);

    };

    var init = function(){

        storage.setItem(ms,'{"data":{}}');

    };

    return {

        set : set,

        get : get,

        remove : remove,

        init : init,

        clear : clear

    };

})();

console.log(mystorage.set('tqtest','tqtestcontent'));//存储

console.log(mystorage.set('aa','123'));//存储

console.log(mystorage.set('tqtest1','tqtestcontent1'));//存储

console.log(mystorage.set('tqtest1','newtqtestcontent1'));//修改

console.log(mystorage.get('tqtest'));//读取

console.log(mystorage.remove('tqtest'));//删除

mystorage.clear();//整体清除

</script>

转载至：http://blog.youkuaiyun.com/guo8ke/article/details/70846743

      本文转自建波李 51CTO博客，原文链接：http://blog.51cto.com/jianboli/1974605，如需转载请自行联系原作者