您现在的位置是:网站首页> 编程资料编程资料
在HTML5 localStorage中存储对象的示例代码利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用HTML5中的网络存储实现方式使用HTML5 IndexDB存储图像和文件的示例HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能
2023-10-08
436人已围观
简介 这篇文章主要介绍了在HTML5 localStorage中存储对象的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
我想在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存储对象内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- html5移动端禁止长按图片保存的实现一文彻底解决HTML5页面中长按保存图片功能
- canvas多重阴影发光效果实现canvas 阴影和图形变换的示例代码HTML5 canvas基本绘图之绘制阴影效果实例讲解使用HTML5 Canvas绘制阴影效果的方法html5实现canvas阴影效果示例HTML5 Canvas阴影使用方法实例演示
- 使用PDF.js渲染canvas实现预览pdf的效果示例Html5基于canvas实现电子签名并生成PDF文档详解使用canvas保存网页为pdf文件支持跨域
- Html5让容器充满屏幕高度或自适应剩余高度的布局实现HTML5 textarea高度自适应的两种方案
- Html5在手机端调用相机的方法实现H5调用相机拍照并压缩图片的实例代码
- 钉钉企业内部H5微应用开发详解html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5 横向滑动导航栏的方法示例使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html+css 实现简易导航栏功能基于html和CSS3制作简单侧边导航栏基于html和CSS3制作酷炫的导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
- HTML5触摸事件(touchstart、touchmove和touchend)的实现html5触摸事件判断滑动方向的实现HTML5触摸事件实现移动端简易进度条的实现方法整理HTML5移动端开发的常用触摸事件HTML5触摸事件演化tap事件介绍
- 百万亚瑟王10月活动:魔法禁书目录之旅开启 特定卡牌3倍攻击_手机游戏_游戏攻略_
- 扩散性百万亚瑟王扭蛋新增异界魔禁卡牌_手机游戏_游戏攻略_
