Using Local Storage in a React Component

This guide explains how to use local storage in a React app to persist input values, even after a page refresh.

Code Example

import { useEffect, useState } from "react";

function App() {
  const localStorageItemName = "value_x";

  // Retrieve existing value from local storage
  const [item, setItem] = useState<string>(() => {
    return localStorage.getItem(localStorageItemName) || "";
  });

  // Update local storage whenever the input changes
  useEffect(() => {
    localStorage.setItem(localStorageItemName, item);
  }, [item]);

  return (
    <>
      <h1>Local Storage</h1>
      <label htmlFor="inp">Input: </label>
      <input 
        name="inp" 
        type="text"
        onChange={(e) => setItem(e.target.value)}
        value={item}
      />
      <br/><br/>
      <p>This will work even if the browser is refreshed.</p>
    </>
  );
}

export default App;