开发者社区> 西游不取经> 正文

关于html5--localStorage 储存json

简介: Web存储机制,为了克服服由cookie 带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。
+关注继续查看

Web存储机制,为了克服服由cookie 带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。提供一种在cookie 之外存储会话数据的途径和另一种存储大量可以跨会话存在的数据的机制,即sessionStorage 和globalStorage。后来在h5 修订时将 globalStorage 废弃换成了localStorage,与globalStorage 不同,不能给localStorage 指定任何访问规则;规则事先就设定好了。要访问同一个localStorage 对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。

主要方法 localStorage.getItem,localStorage.setItem,localStorage.removeItem



var localStorageFunc = {
    //获取 localStorage
    getStorage:function(storage){
        var str = localStorage.getItem(storage);
        if(str != null && str != ''){
            var obj = JSON.parse(JSON.parse(str));
            return obj;
        }
    },
    //设置 localStorage 未嵌套
    setStorage:function(storage,key,val){
        var obj = this.getStorage(storage);
        var saveObj = this.utilStorage(obj,key,val);
        localStorage.setItem(storage,saveObj);
    },
    //设置 localStorage 嵌套 
    secondStorage:function(storage,tagKey,key,val){
        var obj = this.levelStorage(storage,tagKey,key,val);
        this.setStorage(storage,tagKey,obj);
    },
    //清除 localStorage 
    clearStorage:function(storage){
        localStorage.removeItem(storage);
    },
    //json 整理格式化
    utilStorage:function(obj,key,val){
        if(typeof obj == 'object'){
            obj[key] = val;
            var str = JSON.stringify(obj);
            str = str.replace(/\\/g,'');
            obj = JSON.stringify(str);
        }else{
            var item = '{"'+key+'":"' + val + '"}';
            obj = JSON.stringify(item);
        }
        return obj;
    },
    //次级json  整理格式化
    levelStorage:function(storage,tagObj,key,val){
        var tag = this.getStorage(storage);
        var tagItem = tag[tagObj];
        if(typeof tagItem == 'object'){
            tagItem[key] = val;
        }else if(tagItem == undefined){
            tagItem = '{"'+key+'":"' + val + '"}';
            tagItem = JSON.parse(tagItem);
        }
        return tagItem;
    }
};


json 嵌套



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

相关文章
HTML5中localStorage,seeionStorage API使用
HTML5中localStorage,seeionStorage API使用,和学习心得!
51 0
HTML5之本地存储localstorage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。
1200 0
HTML 5 Web 存储-sessionStorage和localStorage
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
892 0
HTML 5 Web 存储-localStorage
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的。
761 0
使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。
1113 0
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
11 0
「HTML+CSS」--自定义加载动画【028】
「HTML+CSS」--自定义加载动画【028】
28 0
+关注
西游不取经
其实呢,我只是一个前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载