• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    在HTML5 localStorage中存储对象的示例代码

    发布者: 涵韵 | 发布时间: 2025-6-16 12:24| 查看数: 187| 评论数: 0|帖子模式

    我想在HTML5中存储一个JavaScript对象
    1. localStorage
    复制代码
    ,但是我的对象显然正在转换为字符串。
    我可以使用来存储和检索原始JavaScript类型和数组
    1. localStorage
    复制代码
    ,但是对象似乎无法正常工作。应该吗
    这是我的代码:
    1. var testObject = { 'one': 1, 'two': 2, 'three': 3 };
    2. console.log('typeof testObject: ' + typeof testObject);
    3. console.log('testObject properties:');
    4. for (var prop in testObject) {
    5.     console.log('  ' + prop + ': ' + testObject[prop]);
    6. }

    7. // Put the object into storage
    8. localStorage.setItem('testObject', testObject);

    9. // Retrieve the object from storage
    10. var retrievedObject = localStorage.getItem('testObject');

    11. console.log('typeof retrievedObject: ' + typeof retrievedObject);
    12. console.log('Value of retrievedObject: ' + retrievedObject);
    复制代码
    控制台输出为
    1. typeof testObject: object
    2. testObject properties:
    3.   one: 1
    4.   two: 2
    5.   three: 3
    6. typeof retrievedObject: string
    7. Value of retrievedObject: [object Object]
    复制代码
    在我看来,该
    1. setItem
    复制代码
    方法是在存储输入之前将输入转换为字符串。
    解决方案:

    再次查看Apple,Mozilla和Mozilla文档,该功能似乎仅限于处理字符串键/值对。
    一种解决方法是在存储对象之前先对它进行字符串化处理,然后在检索它时对其进行解析:
    1. var testObject = { 'one': 1, 'two': 2, 'three': 3 };

    2. // Put the object into storage
    3. localStorage.setItem('testObject', JSON.stringify(testObject));

    4. // Retrieve the object from storage
    5. var retrievedObject = localStorage.getItem('testObject');

    6. console.log('retrievedObject: ', JSON.parse(retrievedObject));
    复制代码
    到此这篇关于在HTML5 localStorage中存储对象的文章就介绍到这了,更多相关HTML5 localStorage存储对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:https://www.jb51.net/html5/772255.html
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表