Question

有人知道为什么我的JSON.parse（）无法正常工作吗？我已经尝试了所有调试工具，但是没有解析数组。

我的代码：

console.log(typeof(localStorage.array));
console.log(localStorage.array);
localStorageArray = JSON.parse(localStorage.array);
console.log(localStorageArray);

控制台：

String //line 1
[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]] //line 2
Array(1)
0: Array(1)
0:
color: "#000000"
tasks: Array(0)
length: 0
__proto__: Array(0)
teacher: "ELA"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0) //The main thing here is that tasks.length == 0

Answer 1

localStorage对象具有自定义属性获取器/设置器，它们的行为不同于普通的JavaScript object属性。

在这里对此进行说明（重点是我）：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

键和值始终是字符串（请注意，与对象一样，整数键将自动转换为字符串）。

因此，当您从localStorage属性中检索值时，即使您只是将属性设置为string，它也将始终以object的形式返回。

您应该更喜欢使用getItem和setItem函数来避免这种自动的字符串转换。

Answer 2

我已经使用chrome浏览器（版本81.0.4044.138（正式版本）（64位））试用了您的示例，这就是我得到的结果。

Here is a picture of local storage instance that I have stored.

Here is a picture of the 4 steps which you have tried out.

为了访问任务数组，我使用了此命令。

console.log(localStorageArray[0][0]['tasks']);

这是用于获得此结果的完整代码。

localStorage.setItem('array','[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]]');

console.log(typeof(localStorage.array));
console.log(localStorage.array);
let localStorageArray = JSON.parse(localStorage.array);
console.log(localStorageArray);
console.log(localStorageArray[0][0]['tasks']); // to access the tasks

控制台：

// second line result
string 


// third line result
[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]] 


 // 4th and 5th line results
0: Array(1)
0:
color: "#000000"
tasks: Array(1)
0: Array(1)
0: {selection: "homework", name: "HW 1", date: "2020-05-15", time: "16:05", marked: false}
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)
teacher: "ELA"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0) 


// 6th line result
0: Array(1)
0:
date: "2020-05-15"
marked: false
name: "HW 1"
selection: "homework"
time: "16:05"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)

我也在HTML文件中尝试了您的问题。对我来说很好。

这是我尝试过的HTML代码。

<!doctype html>
<html lang="en">
<body>
  <script >
    localStorage.setItem('array','[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]]');

    console.log(typeof(localStorage.array)); // line 01
    console.log(localStorage.array); // line 02

    let localStorageArray = JSON.parse(localStorage.array);
    console.log(localStorageArray); // line 03
    console.log(localStorageArray[0][0]['tasks']); //line 04
  </script>
  <div>web site working</div>
</body>
</html>

这是我得到的输出。

为什么JSON.parse（）不解析JSON对象的内部数组？

2 个答案: