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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
用CSS3画一个爱心
Apr 27 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
php中$this->含义分析
2009/11/29 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
解析jquery获取父窗口的元素
2013/06/26 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
办公室主任岗位职责
2013/11/08 职场文书
生产部主管岗位职责
2014/01/06 职场文书
单位创先争优活动方案
2014/01/26 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
股指期货心得体会
2014/09/10 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
详解Python中__new__方法的作用
2022/03/31 Python
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python