Вступ
При розробці легких програм ми можемо захотіти зберігати деякі дані. Якщо база даних надмірна – є чудова альтернатива: localStorage!
Хоча він не замінює базу даних для цілей бази даних, він служить простою системою зберігання на основі файлів, яку можна використовувати для зберігання легкодоступних точок даних.
У цій статті ми дізнаємося, як використовувати
localStorageщоб легко зберігати дані в нашому браузері. Ці дані зберігаються як пари ключ-значення які користувач може легко отримати.
Збереження даних у localStorage у React надзвичайно легко:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Якщо ви не поспішаєте і хочете дізнатися більше про те, як це працює, продовжуйте читати!
Що таке localStorage?
localStorage це об’єкт веб-сховища, який дозволяє розробникам зберігати пари ключ-значення у веб-браузері та гарантує, що ці дані зберігаються після всіх оновлень сторінки, навіть коли користувач закриває або перезапускає веб-переглядач, і вони не мають терміну дії. Збережені пари ключ-значення можуть містити будь-які типи даних – масиви, об’єкти, рядки, числа та багато іншого.
Однак це не може замінити роль баз даних у ваших веб-сайтах і веб-програмах, оскільки дані втрачаються, коли користувач очищає кеш-пам’ять браузера та локальне сховище – зрештою, це локальне сховище і має використовуватися як такий. Тим не менш, існують ситуації, в яких користувач може використовувати localStorage, наприклад реалізація темний режим функція, що зберігає введене значення форми користувача та багато інших.
localStorage має вбудовані методи, які дозволяють отримати доступ до сховища браузера. Одним із прикладів є setItem() метод, який дозволяє нам додати ключ і значення localStorage, що дозволяє нам зберігати дані. Для отримання даних використовуються інші методи – getItem(), видалити дані – removeItem(), очистити все localStorage випадки – clear(), І так далі.
Зберігання даних у localStorage З setItem() Метод
Команда setItem() Метод дозволяє нам зберігати значення будь-якого типу даних localStorage шляхом присвоєння значень ключам, в результаті чого a пара ключ-значення. Цей ключ використовуватиметься для отримання відповідного значення щоразу, коли ми хочемо його отримати localStorage.
Примітка: Щоб зберігати дані в localStorage, ми повинні спочатку перетворити його на JSON рядок використання JSON.stringify() функція. І коли ми захочемо його отримати, ми будемо аналізувати дані за допомогою JSON.parse(), перетворюючи рядок JSON назад на a Об'єкт JSON.
Працюючи з даними в React, ми часто використовуємо гачки щоб допомогти нам зберігати/утримувати його. Хуки також можуть допомогти нам знайти, куди завантажити ці дані. Це також стосується localStorage тому що ми будемо використовувати useState() та useEffect() гачки. Ці гачки критичні, тому що useState() hook використовується для зберігання та встановлення даних, тоді як useEffect() хук запускається за замовчуванням після першого рендерингу та кожного разу, коли передається стан під час зміни другого параметра.
Після пояснення основи, ось код, який ми будемо використовувати для зберігання даних localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Спочатку ми створили стан для зберігання даних, які ми хочемо зберігати localStorage, а потім ми створили a useEffect() гачок, передаючи стан як другий параметр. Таким чином, коли змінюється стан, дані в localStorage оновлюється до поточного значення.
Ми впоралися з основними функціями, які допомагають нам зберігати дані, у межах useEffect() гачок:
localStorage.setItem('dataKey', JSON.stringify(data));
Висновок
У цій статті ми дізналися, як використовувати хуки React для зберігання даних у React за допомогою localStorage. Як зазначалося раніше, це ніколи не замінить роль бази даних, а скоріше допоможе нам зберігати деякі дані, пов’язані з користувачем, які можуть покращити інтерфейс користувача, але не призначені для збереження незалежно від браузера.
