robota_z_localstorage_u_react [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Робота з LocalStorage у react ======
У додатках часто виникає задача зберігання значень у локальному сховищі, таких як обрані фільтри, вподобання теми і т. д.
===== Запис =====
  - збережемо кількість кліків між перезавантаженнями сторінки. Кожного разу, коли змінюється значення стану clicks, компонент оновлюється, і ми можемо записати ефект.
  - У ефекті додаємо код запису в локальне сховище. Ключ - це довільний рядок, наприклад, "saved-clicks", а значення - це стан clicks.
<code>
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>
  );
};

</code>
===== Читання =====
Щоб прочитати значення з локального сховища, нам знадобиться не ефект, а щось цікавіше. Справа в тому, що ефекти виконуються асинхронно, після монтування компонента. Але нам потрібно синхронно прочитати значення з локального сховища, ще до монтування. Розберемося, як це зробити.
Ми вже знаємо, що в хук useState можна передати початкове значення стану.

<code>
const [clicks, setClicks] = useState(() => {
	// Зчитуємо значення за ключем
  const savedClicks = window.localStorage.getItem("saved-clicks");

	// Якщо там щось є, повертаємо це 
  // значення як початкове значення стану
  if (savedClicks !== null) {
    return savedClicks;
  }

	// У протилежному випадку повертаємо 
	// яке-небудь значення за замовчуванням
  return 0;
});

</code>