在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_07_理解instanceof实现原理
Oct 15 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JavaScript实现省市区三级联动
Feb 13 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
网上抓的一个特效
2007/05/11 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
javascript数据类型详解
2017/02/07 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python正规则表达式学习指南
2016/08/02 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python with语句的原理与用法详解
2020/03/30 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python Zmail模块简介与使用示例
2020/12/19 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
学校开学标语
2014/10/06 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
MySQL创建定时任务
2022/01/22 MySQL
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript