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制作hover下划线动画
Mar 27 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 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 神盾解密
2014/06/08 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
甜点店创业计划书
2014/01/27 职场文书
网吧消防安全制度
2014/01/28 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
合作协议书怎么写
2014/04/18 职场文书
道德之星事迹材料
2014/05/03 职场文书
初中作文评语
2014/12/25 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
高中班长竞选稿
2015/11/20 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
聘任书的格式及模板
2019/10/28 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL