如何在localStorage中保存对象阵列?Getting TypeError:推送不是函数

Question

我试图将播放器数据(对象(推送到数组中，然后保存到localStorage中，但即使初始化数组，我也无法使其工作。在第一次运行时，我得到了数据，但在接下来的运行中，阵列无法识别。有人知道发生了什么事吗？这是我的代码：

function handleRanking() {
console.log('run function');
let prevRanking = localStorage.getItem('ranking');
if (prevRanking === null) {
console.log('null value');
prevRanking = [];
}
const player = {
name,
score: total,
picture: gravatarEmail,
};
if (Array.isArray(prevRanking)) {
prevRanking.push(JSON.stringify(player));
localStorage.setItem('ranking', prevRanking);
} else {
console.log('not an array');
}
}

Answer 1

需要立即知道的一件事是localStorage只能保存字符串。因此，当你想保存一个非字符串值时，你需要在保存前调用JSON.stringify(data)，在获得数据并使用它之前调用JSON.parse(data)

在您的情况下，一个简单的方法是添加player，然后将prevRanking保存为字符串。但在解析之前，如果不是null，那么它总是string。

function handleRanking() {
console.log('run function');
let prevRanking = localStorage.getItem('ranking');
if (prevRanking === null) {
console.log('null value');
prevRanking = [];
}else{
prevRanking = JSON.parse(prevRanking);
}
const player = {
name,
score: total,
picture: gravatarEmail,
};
if (Array.isArray(prevRanking)) {
prevRanking.push(player);
localStorage.setItem('ranking', JSON.stringify(prevRanking));
} else {
console.log('not an array');
}
}

Answer 2

因为从LocalStorage获取的键的值是字符串。因此，在推送之前，您必须先执行JSON.parse。https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#parameters

Answer 3

从localStorage检索信息后，需要将其传递到JSON.parse方法中。因为在本地存储中存储信息时，它会保存为字符串。

function handleRanking() {
console.log('run function');
let prevRanking = localStorage.getItem('ranking');
if (prevRanking === null) {
console.log('null value');
prevRanking = [];
}
prevRanking = JSON.parse(prevRanking); // added it in here so prevRanking is definetly defined
const player = {
name,
score: total,
picture: gravatarEmail,
};
if (Array.isArray(prevRanking)) {
prevRanking.push(JSON.stringify(player));
localStorage.setItem('ranking', JSON.stringify(prevRanking));
} else {
console.log('not an array');
}
}