How to save an array of objects in localStorage? Getting TypeError: push is not a function-CodePudding

I am trying to push player data (object) in an array, then save into localStorage, but I can't get it working even if I initialize the array. On the first run I got the data, but on the next runs the array is not recognised. Does anyone know what is going on? Here is my code:

  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');
    }
  }

CodePudding user response：

One thing to know right away is that Local storage can only save strings. Therefore when we have an array or an object, we need to call JSON.stringify(data) before saving. For boolean and nombre the conversion to string is applied automatically. Finally we need to call JSON.parse(data) after getting the data and before using it.

In your case, an easy way is to add the player and then save prevRanking as string. But before that you should parse what you get from localStorage as it is always a string (like I just said) if not null.

  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');
    }
  }

CodePudding user response：

Because the value of a key gets from LocalStorage is a string. So, you have to JSON.parse before pushing. https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#parameters

CodePudding user response：

After you have retrieved the info from the localStorage you need to pass it into the JSON.parse method. Because when storing information in the localstorage it is saved as string.

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');
    }
  }