В этой статье мы рассмотрим, как использовать локальное хранилище (localStorage) в React для сохранения данных между сессиями.
Веб-приложения, созданные на базе React, часто требуют сохранения данных между сеансами работы пользователя. Например, это может быть информация о предпочтениях пользователя, настройках приложения или состоянии компонентов. Для этих целей можно использовать локальное хранилище (localStorage) браузера.
LocalStorage - это механизм хранения данных, который позволяет сохранять пары ключ-значение в браузере пользователя. Он доступен во всех современных браузерах и предоставляет простой API для работы с данными.
В этой статье мы рассмотрим, как работать с локальным хранилищем в React для функциональных компонентов.
Шаг 1: Установка и настройка проекта
Перед началом работы нам понадобится создать новый проект React. Вы можете использовать инструмент Create React App или любой другой способ создания проекта по вашему выбору. После создания проекта установите необходимые зависимости:npm install react-router-dom
Шаг 2: Создание компонента
Для демонстрации работы с локальным хранилищем создадим новый функциональный компонент с именемLocalStorageExample
.
В этом примере мы создаем счетчик с помощью хукаimport React, { useState } from 'react'; const LocalStorageExample = () => { const [count, setCount] = useState(0); // Функция для увеличения счетчика const incrementCount = () => { setCount(prevCount => prevCount + 1); }; // Функция для сохранения значения счетчика в локальном хранилище const saveCountToLocalStorage = () => { localStorage.setItem('count', count); }; // Функция для загрузки значения счетчика из локального хранилища const loadCountFromLocalStorage = () => { const savedCount = localStorage.getItem('count'); if (savedCount) { setCount(parseInt(savedCount)); } }; return ( <div> <p>Count: {count}</p> <button onClick={incrementCount}>Increment</button> <button onClick={saveCountToLocalStorage}>Save to localStorage</button> <button onClick={loadCountFromLocalStorage}>Load from localStorage</button> </div> ); }; export default LocalStorageExample;
useState
. При нажатии на кнопку Increment
значение счетчика увеличивается на 1
. Кнопка Save to localStorage
сохраняет текущее значение счетчика в локальное хранилище, а кнопка Load from localStorage
загружает значение счетчика из локального хранилища.
Шаг 3: Использование компонента
Теперь мы можем использовать наш компонентLocalStorageExample
в других компонентах или маршрутах приложения. Например, добавим его в главный компонент нашего приложения.
После запуска приложения вы увидите счетчик и кнопки для увеличения, сохранения и загрузки значения счетчика из локального хранилища.import React from 'react'; import LocalStorageExample from './LocalStorageExample'; const App = () => { return ( <div> <h1>My App</h1> <LocalStorageExample /> </div> ); }; export default App;