在HTML5 localStorage中存储对象的示例代码


Posted in Javascript onApril 21, 2021

我想在HTML5中存储一个JavaScript对象localStorage,但是我的对象显然正在转换为字符串。

我可以使用来存储和检索原始JavaScript类型和数组localStorage,但是对象似乎无法正常工作。应该吗

这是我的代码:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

控制台输出为

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

在我看来,该setItem方法是在存储输入之前将输入转换为字符串。

解决方案:

再次查看Apple,Mozilla和Mozilla文档,该功能似乎仅限于处理字符串键/值对。

一种解决方法是在存储对象之前先对它进行字符串化处理,然后在检索它时对其进行解析:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

到此这篇关于在HTML5 localStorage中存储对象的文章就介绍到这了,更多相关HTML5 localStorage存储对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
javascript中"/"运算符常见错误
Oct 13 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
canvas多重阴影发光效果实现
JavaScript+HTML实现学生信息管理系统
浅谈vue2的$refs在vue3组合式API中的替代方法
JS实现简单控制视频播放倍速的实例代码
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
详解如何在Canvas中添加事件的方法
Apr 17 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
python中的列表与元组的使用
2019/08/08 Python
python实现代码统计器
2019/09/19 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Python修改DBF文件指定列
2020/12/19 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
网络技术专业推荐信
2014/02/20 职场文书
计算机专业自荐信
2014/05/24 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
工作收入证明模板
2014/10/10 职场文书
结婚主持人致辞
2015/07/28 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
教师素质教育心得体会
2016/01/19 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
python glom模块的使用简介
2021/04/13 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python