Робота з LocalStorage у react

У додатках часто виникає задача зберігання значень у локальному сховищі, таких як обрані фільтри, вподобання теми і т. д.

1. збережемо кількість кліків між перезавантаженнями сторінки. Кожного разу, коли змінюється значення стану clicks, компонент оновлюється, і ми можемо записати ефект.
2. У ефекті додаємо код запису в локальне сховище. Ключ - це довільний рядок, наприклад, «saved-clicks», а значення - це стан clicks.

const App = () => {
  const [clicks, setClicks] = useState(0);

  useEffect(() => {
    window.localStorage.setItem("saved-clicks", clicks);
  }, [clicks]);

  return (
    <div>
      <button onClick={() => setClicks(clicks + 1)}>
        You clicked {clicks} times
      </button>
      <button onClick={() => setClicks(0)}>Reset</button>
    </div>
  );
};