H5 js 处理localstorage方法封装-阿里云开发者社区

开发者社区> 技术小胖子> 正文

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.csdn.net/guo8ke/article/details/70846743







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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
企业中直播系统的融入,让办公处理更加便利
如今的互联网发展非常快,人们的起居生活出行方式与互联网都息息相关,其中也囊括了办公环节。企业需要一个多样化沟通的需求,而近年来盛行的直播系统就恰好可以满足企业这样的需求,可有效地提高办公间的沟通和办公效率。
59 0
处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
server2008  iis7,出错上面的错误 . 提示的原因可能是net未完整安装导致的. 解决方法:  1、开始->运行cmd命令窗->以管理员身份运行: %windir%\Microsoft.
890 0
js处理url
需求:用js获得url的电话号码和状态 针对url地址:http://www.deikang.com/index.php?tel=15811296111&status=1&id=100 var url="http://www.
589 0
asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
开发web项目时需要安装IIS,在安装好IIS的Windows7本上发布asp.net网站时,web程序已经映射到了本地IIS上,但运行如下错误提示“处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“Man...
805 0
Linux问题情报分享(2):grub-install工具不能处理/dev/xvda*路径
grub-install不能处理/dev/xvda这样的路径,需要重装grub时怎么处理呢?
2297 0
ML之DR之PCA:利用PCA对手写数字图片识别数据集进行降维处理(理解PCA)
ML之DR之PCA:利用PCA对手写数字图片识别数据集进行降维处理(理解PCA)
16 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载