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之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
node使用request请求的方法
2019/12/20 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
如何通过Python实现标签云算法
2019/07/02 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
在线课程:Skillshare
2019/04/02 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
机械设计及其自动化求职推荐信
2014/02/17 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
协议书范本
2014/04/23 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
开工典礼策划方案
2014/05/23 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
文明礼仪主题班会
2015/08/13 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android