Введение
При разработке легковесных приложений мы можем захотеть сохранить некоторые данные. Если база данных избыточна — есть отличная альтернатива: 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() метод позволяет нам сохранять значения любого типа данных в localStorage присваивая значения клавишам, что приводит к пара "ключ-значение". Этот ключ будет использоваться для получения соответствующего значения всякий раз, когда мы хотим получить его из localStorage.
Примечание: Для хранения данных в localStorage, мы должны сначала преобразовать его в Строка JSON используя JSON.stringify() функция. И когда мы хотим получить его, мы будем анализировать данные, используя JSON.parse(), преобразуя строку JSON обратно в Объект JSON.
При работе с данными в React мы часто используем крючки чтобы помочь нам хранить / держать его. Хуки также могут помочь нам найти, куда загружать эти данные. Это также относится к localStorage потому что мы будем использовать useState() и useEffect() крючки. Эти крючки имеют решающее значение, потому что useState() хук используется для хранения и установки данных, тогда как useEffect() ловушка срабатывает по умолчанию после первого рендеринга и всякий раз, когда изменяется состояние, переданное в качестве второго параметра.
После объяснения основы, вот код, который мы будем использовать для хранения данных в localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Сначала мы создали состояние для хранения данных, которые мы хотим сохранить в нашем localStorage, а затем мы создали useEffect() ловушка, передавая состояние в качестве второго параметра. Таким образом, всякий раз, когда состояние изменяется, данные в localStorage обновляется до текущего значения.
Мы обработали основные функции, которые помогают нам в хранении данных, в рамках useEffect() крюк:
localStorage.setItem('dataKey', JSON.stringify(data));
Заключение
В этой статье мы узнали, как использовать хуки React для хранения данных в React, используя localStorage. Как указывалось ранее, это никогда не заменит роль базы данных, а скорее поможет нам хранить некоторые пользовательские данные, которые могут улучшить пользовательский интерфейс, но не предназначены для сохранения независимо от браузера.
