在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 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
VUE安装使用教程详解
Jun 03 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
MySQL授权问题总结
2007/05/06 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python实现购物程序思路及代码
2017/07/24 Python
python版学生管理系统
2018/01/10 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Django 多环境配置详解
2019/05/14 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Django 外键的使用方法详解
2019/07/19 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
公司业务主管岗位职责
2013/12/07 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
招股说明书范本
2014/05/06 职场文书
计生专干事迹
2014/05/28 职场文书
审美与表现自我评价
2015/03/09 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
业务员管理制度范本
2015/08/06 职场文书