Оригінальна публікація: How to Use localStorage with React Hooks to Set and Get Items

localStorage — це об’єкт вебсховища, який дозволяє сайтам і програмам JavaScript зберігати пари ключ-значення у веббраузері безстроково.

Це означає, що дані зберігаються після оновлення сторінки (sessionStorage) і навіть перезапуску браузера. Це вказує на те, що дані, які зберігаються в браузері, залишаться, навіть якщо вікно браузера закрито.

В загальному, localStorage дозволяє розробникам зберігати дані в браузері та отримувати їх.

Однак важливо розуміти, що використання localStorage як бази даних для вашого проєкту не є хорошою практикою, оскільки дані будуть втрачені, коли користувач, наприклад, очистить кеш.

Розробники часто використовують localStorage для додавання функції нічного режиму до програми, збереження елементу списку справ або збереження введених користувачем значень форми.

У цій публікації ми розглянемо, як використовувати localStorage з хуками React, щоб легко встановлювати та отримувати елементи.

Що таке хуки React?

Хуки React — це функції JavaScript, які ви можете імпортувати з пакету React, щоб додати можливостей своїм компонентам.

Хуки дозволяють React-розробникам використовувати методи стану та життєвого циклу у функціональних компонентах. Вони також працюють з існуючим кодом, завдяки чому їх легко адаптувати до кодової бази.

Щоб використовувати localStorage з React нам знадобляться два хука:

  • useState() — хук стану вашого компоненту, який гарантовано зміниться через деякий час. Хук useState() — це функція, яка приймає один параметр, початковий стан (який може бути значенням змінної, об’єкта або будь-якого іншого типу даних у вашому компоненті), і повертає два значення: поточний стан і функцію, яку можна використовувати для оновлення стану.
  • useEffect() — хук ефекту, активується за замовчуванням після першого відтворення та кожного разу, коли змінюється стан. Як випливає з назви, він використовується для виконання ефекту кожного разу, коли змінюється стан. Цей хук чудово підходить для налаштування слухачів, отримання даних з API та видалення слухачів перед видаленням компоненту з DOM.

Як реалізувати localStorage у React

localStorage надає нам доступ до об’єкту, що зберігає браузер, за допомогою п’яти методів:

  • setItem(): цей метод використовується для додавання ключа та значення до localStorage;
  • getItem(): цей метод використовується для отримання елемента з localStorage за допомогою ключа;
  • removeItem(): ця техніка використовується для видалення елемента з localStorage на основі його ключа;
  • clear(): ця техніка використовується для видалення всіх елементів з localStorage;
  • key(): коли ви вказуєте номер, це допомагає отримати ключ localStorage.

У цій публікації ми розглянемо лише найпопулярніші методи, а саме перші два.

Як використовувати метод setItem()

Надаючи значення ключу, цей метод використовується для зберігання об’єктів у localStorage. Це значення може мати будь-який тип даних, включно з текстом, цілим числом, об’єктом, масивом тощо.

Важливо пам’ятати, що для того, щоб зберігати дані в localStorage, ви повинні спочатку зв’язати їх за допомогою JSON.stringify() функції.

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

У наведеному вище коді ми спочатку створили стан і призначили йому порожній масив (у вас може бути будь-який інший тип даних). Потім ми використали useEffect(), щоб додавати об’єкти до localStorage кожного разу, коли змінюється значення нашого стану. Ми зробили це, передавши стан як другий аргумент.

По суті, це основний код, який відповідає за додавання пар ключ-значення до localStorage:

localStorage.setItem('items', JSON.stringify(items));

Простіше кажучи, попередній код називає ключ («items»), а потім призначає йому значення, але спочатку ми повинні були переконатися, що дані, які ми додаємо, є рядком JSON.

Ми використовуємо JSON.stringify() для перетворення об’єкта JSON у текст JSON, збережений у рядку, який потім можна передати на вебсервер.

s_EAEEAE9063B0CA7CBC6574F36123E82B36B6C1EC3724A86DA7C0B4C67C2DD652_1645380076460_explaining+useeffect+local+storage
Структура роботи хуків із локальним сховищем для встановлення елементів

Як використовувати метод  getItem()

Цей метод отримує об’єкти з localStorage. Існують інші методи, щоб досягти цього за допомогою React, але ми будемо використовувати хук useEffect(), тому що він найкращий.

Хук useEffect() допомагає нам отримати всі елементи під час першого рендерингу, тобто коли компонент встановлюється або повторно рендериться, він отримує всі наші дані з localStorage.

Зауважте, що саме тому ми передали порожній другий аргумент.

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

Важливо пам’ятати, що коли ми зберігали дані, ми спочатку перетворили їх на рядок JSON. Це означає, що для того, щоб ми могли використовувати його, нам потрібно перетворити рядок JSON назад на об’єкт JSON. Ми робимо це за допомогою методу JSON.parse().

s_EAEEAE9063B0CA7CBC6574F36123E82B36B6C1EC3724A86DA7C0B4C67C2DD652_1645369611908_explaining+useeffect+local+storage2
Структура роботи хуків із локальним сховищем для отримання елементів

Висновок

У цій публікації ми дізналися, як використовувати localStorage з хуками React, коли його використовувати та який хук використовувати.

Якщо ви хочете побачити, як це працює на практиці, ви можете отримати вихідний код простої програми зі списком справ, яка використовує localStorage і ці хуки за посиланням.