在浏览器中存储数组和对象(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
相关推荐
学习编程之路几秒前
Rust内存对齐与缓存友好设计深度解析
开发语言·缓存·rust
yoyoma5 分钟前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面7 分钟前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
前端九哥8 分钟前
老板:就是你小子删光了try-catch?
前端·javascript
Achieve前端实验室8 分钟前
深入浅出 ES Module
前端·javascript·前端框架
Onion9 分钟前
BroadcastChannel 使用:优缺点、场景示例与最佳实践
前端·javascript
无限进步_9 分钟前
C语言字符串连接实现详解:掌握自定义strcat函数
c语言·开发语言·c++·后端·算法·visual studio
东东23310 分钟前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js
Han.miracle10 分钟前
Java的多线程——多线程(二)
java·开发语言·线程·多线程
上车函予10 分钟前
点击即扩散:使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css