localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON;那么,localStorage怎么才能实现JSON数据的存储与读取呢?

思路:既然localStorage只能存储字符串数据,那么我们就可以先把JSON对象转换成字符串,然后用localStorage方法存储起来;等到需要用到这些JSON数据时,先把它们读取出来,然后再转换成JSON对象加以利用。

具体代码如下:

var jsonData = {'name': '张三', 'age': 29}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 29

扩展:

stringify()用于从一个对象解析出字符串;

parse()用于从一个字符串中解析出json对象。

localStorage 如何存储JSON数据并读取JSON数据的更多相关文章

  1. Newtonsoft.Json.Linq对象读取DataSet数据

    Newtonsoft.Json.Linq对象读取DataSet数据: private void button4_Click(object sender, EventArgs e)        {   ...

  2. Unity的Json解析<一>--读取Json文件

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50373558 作者:car ...

  3. CAD在网页中绘图,并为新绘的对象写扩展数据和读取扩展数据

    在网页中绘图,并为新绘的对象写扩展数据和读取扩展数据.下面帮助的完整例子,在控件安装目录的 Sample\Ie\iedemo.htm 中. 主要用到函数说明: _DMxDrawX::InsertBlo ...

  4. 简单使用JSON,JavaScript读取JSON文本(三)

    JavaScript 读取 JSON 文本转换为对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 Jav ...

  5. python json及mysql——读取json文件存sql、数据库日期类型转换、终端操纵mysql及python codecs读取大文件问题

    preface: 近期帮师兄处理json文件,须要读到数据库里面,以备其兴许从数据库读取数据.数据是关于yelp站点里面的: https://github.com/Yelp/dataset-examp ...

  6. Newtonsoft.Json 通过 JObject 读取 json对像 超简单

    /* json 格式的字符串解析 格式化 { "input": { "size": 193156, "type": "image/ ...

  7. pandas外部数据的读取构造数据框-文本文件读取(一种utf-8中文编码乱码处理经验)

    上面一篇文章有记录pandas构造数据框的方式有二维数组,字典,嵌套的列表和元组等,本篇用于介绍通过外部数据读取的方式来构造数据框. python读取外部数据集的时候,这些数据集可能包含在文本文件(c ...

  8. json+一般处理程序读取数据库数据

    一般处理程序的语法结构 string jsoncallback = context.Request["jsoncallback"]; 声明变量 前台传值使用        stri ...

  9. 在localStorage中存储对象数组并读取

    频繁ajax请求导致页面响应变慢. 于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSO ...

随机推荐

  1. Activiti----hellowWorld(使用H2数据库)

    1.项目结构 2.pom <dependencies> <dependency> <groupId>junit</groupId> <artifa ...

  2. 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

  3. MySQL show master / slave status 命令参数

    一.show master status 二.show slave status Slave_IO_State SHOW PROCESSLIST输出的State字段的拷贝.SHOW PROCESSLI ...

  4. (中等) POJ 2528 Mayor's posters , 离散+线段树。

    Description The citizens of Bytetown, AB, could not stand that the candidates in the mayoral electio ...

  5. 初步了解php,实现注册及登录

    直接上图(数据库是用wamp实现的) 注册页 html 及 php 代码 登陆页 html 及 php 代码

  6. bzoj4010: [HNOI2015]菜肴制作【拓扑排序】

    想到了一个分治方法,每一次尽量放小的那个,把它依赖的放在左边,不依赖的放在右边. TLE 80: #include <bits/stdc++.h> #define rep(i, a, b) ...

  7. 360路由器设置网段ip

    路由器设置->高级设置->修改路由器地址

  8. API WAVE 专栏

    关于音频输入.输出设备的使用 源:API WAVE 专栏

  9. svn 安装网站

    1.svn插件 http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240

  10. PreparedStatement接口

    从实际来讲,Statement现在已经不使用了,他已经称为了历史. Statement执行关键性问题在于他需要一个完整 的字符串定义要使用的SQL语句,而PreparedStatement可以动态的设 ...