在浏览器中存储数组和对象(js的问题)

简介: 在浏览器中存储数组和对象(js的问题)

有时候在使用 JavaScript 的时候,开发者可能会想使用 "localStorage" 来方便地存储数据。但一个常见的错误是试图按原样把数组和对象存到 "localStorage" 里。"localStorage" 只接受字符串。


为了存储对象,JavaScript 会把对象转成字符串。结果就是 object 会变成 "[Object Object]",数组元素会变成用逗号分隔的字符串。


例如:

​​const obj = { name: "JavaScript" };
​​window.localStorage.setItem("test-object", obj);
​​console.log(window.localStorage.getItem("test-object"));
​​// [Object Object]
​​const arr = ["JavaScript", "programming", 45];
​​window.localStorage.setItem("test-array", arr);
​​console.log(window.localStorage.getItem("test-array"));
​​// JavaScript, programming, 45

对象被这样存储起来的话,就会很难访问它们。以 object 为例,用 ".name" 的方式去访问 object 就会导致异常。这是因为 "[Object Object]" 已经是一个字符串了,它并没有 "name" 属性。


想要在 localStorage 里存储对象和数组,更好的方式是使用 "JSON.stringify"(用于把对象转换成字符串)和 "JSON.parse"(用于把字符串转换成对象)。这样就可以很容易地访问对象了。


上面的代码正确的版本应该是:

​​const obj = { name: "JavaScript" };
​​window.localStorage.setItem("test-object", JSON.stringify(obj));
​​const objInStorage = window.localStorage.getItem("test-object");
​​console.log(JSON.parse(objInStorage));
​​// {name: 'JavaScript'}
​​const arr = ["JavaScript", "programming", 45];
​​window.localStorage.setItem("test-array", JSON.stringify(arr));
​​const arrInStorage = window.localStorage.getItem("test-array");
​​console.log(JSON.parse(arrInStorage));
​​// JavaScript, programming, 45
相关文章
|
5天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
14天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
15 2
|
17天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
17天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
13天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
30 0
|
13天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
10 0
|
17天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
11 0
|
17天前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
10 0
|
17天前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
27 0
|
存储 JavaScript 前端开发
JavaScript实现存储HTML字符串
原文:JavaScript实现存储HTML字符串 吃完晚饭,在翻各位大牛的博客,偶然看到一篇原创《原创--Javascript你意想不到的功能!!!》眼前一亮,这思路确实霸气测漏,可以不用理会字符串的单引号和双引号的转义,因为人家用的是注释,注释当然什么都可以写。
1118 0