Html5中localStorage存储JSON数据并读取JSON数据的实现方法


Posted in HTML / CSS onFebruary 13, 2017

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对象。

以上所述是小编给大家介绍的Html5中localStorage存储JSON数据并读取JSON数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 #HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 #HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 #HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 #HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 #HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 #HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 #HTML / CSS
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python实现归并排序算法
2018/11/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python在不同条件下的输入与输出
2020/02/13 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
python 元组和列表的区别
2020/12/30 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
村干部培训班主持词
2014/03/28 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
电力工程合作意向书
2015/05/11 职场文书
红色电影观后感
2015/06/18 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书