如何在localStorage中保存一组对象？获取 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');
    }
  }