在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 相关文章推荐
图片之间的切换
Jun 26 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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中变量及部分适用方法
2008/03/27 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
求职信模板怎么做
2014/01/26 职场文书
财产保全担保书范文
2014/04/01 职场文书
竞选村长演讲稿
2014/04/28 职场文书
法律顾问服务方案
2014/05/15 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
商业用房租赁协议书
2014/10/13 职场文书
大学生就业意向书
2015/05/11 职场文书
负责培养人意见
2015/06/05 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js