Question 209132 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Store a React useState array of objects in localStorage

how can i store and get an array of objects useState in/from localStorage? this current code is not working.

to be more specific, i would like the app to update the whole array of objects whenever certain values in it are changed (level, for example). it seems to be returning null as the level currently. would appreciate some help thanks!

  useEffect(() => {
    localStorage.setItem("symbolData", JSON.stringify(symbols));
  }, [currentSymbol.level]);

  useEffect(() => {
    const symbolData = JSON.parse(localStorage.getItem("symbolData") || "[]");
    setSymbols(symbolData);
  }, []);

here’s the structure of my array of objects

  const [symbols, setSymbols] = useState([
    {
      id: 1,
      name: "Vanishing Journey",
      alt: "Vanishing Journey Symbol",
      img: "/symbols/vj-symbol.webp",
      type: "arcane",
      dailyName: "Vanishing Journey Research",
      weeklyName: "Erda Spectrum",
      extraName: "Reverse City",
      level: NaN,
      experience: NaN,
      daily: NaN,
      weekly: NaN,
      extra: NaN,
      dailySymbols: 9,
      daysRemaining: 0,
      totalDaysRemaining: 0,
      symbolsRemaining: 0,
      mondayCount: 0,
      completion: "",
      data: [
        { level: 1, symbolsRequired: 0, mesosRequired: 0 },
        { level: 2, symbolsRequired: 12, mesosRequired: 7070000 },
        { level: 3, symbolsRequired: 15, mesosRequired: 11030000 },
        { level: 4, symbolsRequired: 20, mesosRequired: 14990000 },
        { level: 5, symbolsRequired: 27, mesosRequired: 18950000 },
        { level: 6, symbolsRequired: 36, mesosRequired: 22910000 },
        { level: 7, symbolsRequired: 47, mesosRequired: 26870000 },
        { level: 8, symbolsRequired: 60, mesosRequired: 30830000 },
        { level: 9, symbolsRequired: 75, mesosRequired: 34790000 },
        { level: 10, symbolsRequired: 92, mesosRequired: 38750000 },
        { level: 11, symbolsRequired: 111, mesosRequired: 42710000 },
        { level: 12, symbolsRequired: 132, mesosRequired: 46670000 },
        { level: 13, symbolsRequired: 155, mesosRequired: 50630000 },
        { level: 14, symbolsRequired: 180, mesosRequired: 54590000 },
        { level: 15, symbolsRequired: 207, mesosRequired: 58550000 },
        { level: 16, symbolsRequired: 236, mesosRequired: 62510000 },
        { level: 17, symbolsRequired: 267, mesosRequired: 66470000 },
        { level: 18, symbolsRequired: 300, mesosRequired: 70430000 },
        { level: 19, symbolsRequired: 335, mesosRequired: 74390000 },
        { level: 20, symbolsRequired: 372, mesosRequired: 78350000 },
      ],
    },
    {
      id: 2,
      name: "Chu Chu Island",
      alt: "Chu Chu Symbol",
      img: "/symbols/chuchu-symbol.webp",
      type: "arcane",
      dailyName: "Chu Chu's Finest Cuisine",
      weeklyName: "Hungry Muto",
      extraName: "Yum Yum Island",
      level: NaN,
      experience: NaN,
      daily: localStorage.getItem("daily") === "true",
      weekly: localStorage.getItem("weekly") === "true",
      extra: localStorage.getItem("extra") === "true",
      dailySymbols: 8,
      daysRemaining: 0,
      totalDaysRemaining: 0,
      symbolsRemaining: 0,
      mondayCount: 0,
      completion: "",
      data: [
        { level: 1, symbolsRequired: 0, mesosRequired: 0 },
        { level: 2, symbolsRequired: 12, mesosRequired: 10840000 },
        { level: 3, symbolsRequired: 15, mesosRequired: 15460000 },
        { level: 4, symbolsRequired: 20, mesosRequired: 20080000 },
        { level: 5, symbolsRequired: 27, mesosRequired: 24700000 },
        { level: 6, symbolsRequired: 36, mesosRequired: 29320000 },
        { level: 7, symbolsRequired: 47, mesosRequired: 33940000 },
        { level: 8, symbolsRequired: 60, mesosRequired: 38560000 },
        { level: 9, symbolsRequired: 75, mesosRequired: 43180000 },
        { level: 10, symbolsRequired: 92, mesosRequired: 47800000 },
        { level: 11, symbolsRequired: 111, mesosRequired: 52420000 },
        { level: 12, symbolsRequired: 132, mesosRequired: 57040000 },
        { level: 13, symbolsRequired: 155, mesosRequired: 61660000 },
        { level: 14, symbolsRequired: 180, mesosRequired: 66280000 },
        { level: 15, symbolsRequired: 207, mesosRequired: 70900000 },
        { level: 16, symbolsRequired: 236, mesosRequired: 75520000 },
        { level: 17, symbolsRequired: 267, mesosRequired: 80140000 },
        { level: 18, symbolsRequired: 300, mesosRequired: 84760000 },
        { level: 19, symbolsRequired: 335, mesosRequired: 89380000 },
        { level: 20, symbolsRequired: 372, mesosRequired: 94000000 },
      ],
    }
  ]);
Tags:

2

Answers


  1. 0

    are you sure that this line is correct

    useEffect(() => {
    localStorage.setItem("symbolData", JSON.stringify(symbols));
  }, [currentSymbol.level]);

    shouldn’t it be Symbols rather than currentSymbol ?

    Login or Signup to reply.
  2. 0

    Your useEffect dependency array has a dependency for currentSymbol.level but I don’t see that referenced in your effect and don’t know how that variable is stored in your program. The dependency array from what I can see in the code you presented should have "symbols":

      useEffect(() => {
    localStorage.setItem("symbolData", JSON.stringify(symbols));
  }, [symbols]);

    If you only want to listen for levels that maybe break that out into its own state

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search