关于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 嵌套



相关文章
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
135 0
|
2月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
44 1
|
3月前
|
JSON 前端开发 JavaScript
|
6月前
|
存储 缓存 移动开发
HTML5 的离线储存怎么使用,工作原理
HTML5 的离线储存怎么使用,工作原理
96 0
|
1月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
56 2
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
22 0
|
3月前
|
JSON JavaScript 数据格式
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
36 0
|
6月前
|
存储 移动开发 缓存
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
75 2
|
数据采集 JSON JavaScript
jsoup爬虫发送get、post请求、解析html、获取json
jsoup爬虫发送get、post请求、解析html、获取json
712 0
|
6月前
|
存储 缓存 移动开发
详细介绍HTML5的离线储存(工作原理+使用场景+真实使用步骤)
详细介绍HTML5的离线储存(工作原理+使用场景+真实使用步骤)