javascript - 解析本地存储对象会出现未捕获的语法错误？

Question

我正在尝试保存 Math.random 给出的数字。我将它们保存在数组中，该数组保存到 localStorage 中。然后，我想在使用 Math.random 时附加每个新的数字数组。如果您 view the code I tried wrting 会更容易.

var nums = [];
for (var i = 0; i < 5; i++) {
    var num = Math.floor(Math.random() * 50);
    nums.push(" " + num);
}
console.log(nums);

function appendToStorage(name, data) {
    var old = localStorage.getItem(name);
    if (old === null) old = "";
    localStorage.setItem(name, old + JSON.stringify(data));
}

if (localStorage.num) {
    appendToStorage('num', nums);
} else {
    localStorage.setItem("num", JSON.stringify(nums));
}
var nums2 = localStorage.getItem("num");
console.log(nums2);
document.getElementById("test").innerHTML = JSON.parse(nums2);

但这不起作用。控制台显示 Uncaught SyntaxError: Unexpected token [如果您删除 getElementById 上的 JSON.parse，则会出现此错误。不过，我希望对其进行解析，以便更容易查看数字。我怎样才能做到这一点？

Answer 1

如果您只是将一个有效的 JSON 字符串附加到另一个有效的 JSON 字符串，则不会获得有效的 JSON 字符串。例如:

var myJSON = '{"thing": "data"}';  // valid
myJSON = myJSON + myJSON; // myJSON is now '{"thing": "data"}{"thing": "data"}', not valid

为了可靠地做到这一点，您需要解析检索到的 JSON，更新结果，然后再次字符串化，然后将其存储在 localStorage 中。

function appendToStorage(name, data) {
    var old = localStorage.getItem(name);
    if (old === null) old = "[]";
    var newData = JSON.parse(old);
    newData.push(data);
    localStorage.setItem(name, JSON.stringify(newData));
}

请注意，当您解析它时，这将返回一个数组，这将在您尝试设置 innerHTML 时导致出现问题。您需要首先将数组解压为某种文本格式(感谢jibsales)。