在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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JavaScript模拟push
Mar 06 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Three.JS实现三维场景
Dec 30 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 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判断表是否存在的方法
2015/06/18 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
JQuery 入门实例1
2009/06/25 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python类如何定义私有变量
2020/02/03 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
python中re模块知识点总结
2021/01/17 Python
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS