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

泡芙·草莓2023-12-15 1:31

有时候在使用 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