Различия

Показаны различия между двумя версиями страницы.

--- robota_z_localstorage_u_react [2024/03/11 19:58]
tro создано
+++ robota_z_localstorage_u_react [2024/03/11 20:00] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Робота з LocalStorage у react ======
 У додатках часто виникає задача зберігання значень у локальному сховищі, таких як обрані фільтри, вподобання теми і т. д.
+===== Запис =====
   - збережемо кількість кліків між перезавантаженнями сторінки. Кожного разу, коли змінюється значення стану clicks, компонент оновлюється, і ми можемо записати ефект.
   - У ефекті додаємо код запису в локальне сховище. Ключ - це довільний рядок, наприклад, "saved-clicks", а значення - це стан clicks.
@@ Строка 20: / Строка 21: @@
   );
 };
+</code>
+===== Читання =====
+Щоб прочитати значення з локального сховища, нам знадобиться не ефект, а щось цікавіше. Справа в тому, що ефекти виконуються асинхронно, після монтування компонента. Але нам потрібно синхронно прочитати значення з локального сховища, ще до монтування. Розберемося, як це зробити.
+Ми вже знаємо, що в хук useState можна передати початкове значення стану.
+<code>
+const [clicks, setClicks] = useState(() => {
+	// Зчитуємо значення за ключем
+  const savedClicks = window.localStorage.getItem("saved-clicks");
+	// Якщо там щось є, повертаємо це
+  // значення як початкове значення стану
+  if (savedClicks !== null) {
+    return savedClicks;
+  }
+	// У протилежному випадку повертаємо
+	// яке-небудь значення за замовчуванням
+  return 0;
+});
 </code>