localStorage is a Web Storage API, using which browsers are able to save data in the form of key/value pairs.
\nlocalStorage stores data with no expiration date.
\nThe data is persisted even when the browser is closed and reopened.
\nThe localStorage API can only save strings.
\nInside a React component, we should place our call to localStorage inside useEffect because of performance reasons. localStorage is a synchronous API; therefore, using it outside of useEffect can slow down our application.
We can save a key/value pair to localStorage using the following syntax:
\nlocalStorage.setItem("key", "value");import React, { useState, useEffect } from "react"\n\nfunction App() {\n const [nums, setNums] = useState([1, 2, 4])\n\n useEffect(() => {\n localStorage.setItem("nums", JSON.stringify(nums))\n }, [nums])\n\n function handleAddClick() {\n setNums([...nums, Math.random()])\n }\n\n return (\n <button className="btn btn-primary m-5" onClick={handleAddClick}>\n Add Random Number\n </button>\n )\n}\n\nexport default AppBecause localStorage can ONLY save strings, we must convert arrays/objects to strings before saving them to localStorage.
\nWe can convert an array/object to a string using JSON.stringify().
In the code snippet above, on line 7, we convert the nums array to a string using JSON.stringify() before saving it to the localStorage.
Every time we click the AddRandomNumber button, we add a random number to the nums array, which runs useEffect (the nums state variable is added to the dependency array), thereby persisting the updated nums array to localStorage.
We can read the value stored in localStorage using the following syntax:
\nlocalStorage.getItem("key");localStorage always gives us a string, so we need to manually convert it to a Number.
\nlet value = localStorage.getItem("key")\n\nvalue = Number.parseInt(value, 10)Booleans could be either true or false. When saved to localStorage, they will either be \"true\" or \"false\", because they get converted to strings.
Therefore, the easiest way to convert those strings back to booleans is to always compare the localStorage entry to the string \"true\".
const value = localStorage.getItem("key") === "true"Remember that we convert arrays and objects to strings using JSON.stringify() before saving them to localStorage. This means that when we want to restore them, we need to parse them into objects using JSON.parse().
const value = JSON.parse(localStorage.getItem("key"))We can hydrate the initial state with data stored in localStorage using the following approach:
\nimport React, { useState } from "react"\n\nconst App = () => {\n // do NOT use this (for performance reasons)\n const [state, setState] = useState(localStorage.getItem("key"))\n\n return null\n}The code above works but creates a performance issue: we only need the initial state once; however, every time the App component rerenders, we will end up running localStorage.getItem(\"key\").
To fix the issue, we need to pass a function definition that will allow React to call it only on the initial render.
\nHere is how it looks like:
\nimport React, { useState } from "react"\n\nconst App = () => {\n const [state, setState] = useState(() => localStorage.getItem("key"))\n\n return null\n}