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,如需转载请自行联系原作者



相关文章
|
8天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
10天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
14 0
|
11天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
8天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
1天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
2天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
18 11
|
3天前
|
JavaScript
JS生成uuid的四种方法
JS生成uuid的四种方法
7 0
|
3天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0