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 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
微信支付开发维权通知实例
2016/07/12 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
js的with语句使用方法
2007/09/21 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Python的subprocess模块总结
2014/11/07 Python
python sort、sorted高级排序技巧
2014/11/21 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python分数表示方式和写法
2019/06/26 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python实现简单猜单词游戏
2020/12/24 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
新教师教学工作总结
2015/08/14 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL