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. [Unity Shader]光照模型对物体的假设

    什么是光照模型 光照模型就是模拟光在物体间的传递过程,以确保物体可见表面每一点的亮度和颜色. 当光照射到一个物体表面时,光可能被吸收.反射或折射.反射和折射的光使物体可见.如果入射光全部被吸收,物体将 ...

  2. (中等) POJ 1436 Horizontally Visible Segments , 线段树+区间更新。

    Description There is a number of disjoint vertical line segments in the plane. We say that two segme ...

  3. leetcode day8

    [83] Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...

  4. imagebutton、imageview的属性

    [转]http://blog.csdn.net/victoryckl/article/details/14162131 http://blog.sina.com.cn/s/blog_68b3fdc30 ...

  5. 2.13. 获取托管对象(Core Data 应用程序实践指南)

    用NSFetchRequest获取NSArray,里面都是托管对象.如果上下文里没有数据,就会从持久化存储区里获取. NSFetchRequest *request = [NSFetchRequest ...

  6. 【python之路12】三元运算符(if)

    1.三元运算符条件语句 普通if条件是这样写的: n = 1 if n > 0: st = '大于0' else: st = '小于等于0' print(st) 三元运算符的写法: n = 1 ...

  7. js原生设计模式——9外观模式封装

    1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  8. Promise基础

    前言: ES2015将Promise引入语言规范,包括fetch等在内的API也构建在Promise之上.作为让js摆脱“回调地狱”的重要一环和众多框架中的重要基础设施之一,学习如何自己实现一个Pro ...

  9. Java Web快速入门——全十讲

    Java Web快速入门——全十讲 这是一次培训的讲义,就是我在给学生讲的过程中记录下来的,非常完整,原来发表在Blog上,我感觉这里的学生可能更需要. 内容比较长,你可以先收藏起来,慢慢看. 第一讲 ...

  10. 数据库基础-JOIN

    JOIN分类 三.JOIN分类详解 INNER JOIN: 仅仅返回两个表中,匹配列相同的列值,所在行的数据. SELECT * FROM Table1 t1 INNER JOIN Table2 t2 ...