Введение
При разработке легковесных приложений мы можем захотеть сохранить некоторые данные. Если база данных избыточна — есть отличная альтернатива: 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
. Как указывалось ранее, это никогда не заменит роль базы данных, а скорее поможет нам хранить некоторые пользовательские данные, которые могут улучшить пользовательский интерфейс, но не предназначены для сохранения независимо от браузера.