Работа с локальным хранилищем (localStorage) в React

Веб-приложения, созданные на базе React, часто требуют сохранения данных между сеансами работы пользователя. Например, это может быть информация о предпочтениях пользователя, настройках приложения или состоянии компонентов. Для этих целей можно использовать локальное хранилище (localStorage) браузера. LocalStorage - это механизм хранения данных, который позволяет сохранять пары ключ-значение в браузере пользователя. Он доступен во всех современных браузерах и предоставляет простой API для работы с данными. В этой статье мы рассмотрим, как работать с локальным хранилищем в React для функциональных компонентов.

Шаг 1: Установка и настройка проекта

Перед началом работы нам понадобится создать новый проект React. Вы можете использовать инструмент Create React App или любой другой способ создания проекта по вашему выбору. После создания проекта установите необходимые зависимости.

Шаг 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;

После запуска приложения вы увидите счетчик и кнопки для увеличения, сохранения и загрузки значения счетчика из локального хранилища.

Итоги

Работа с локальным хранилищем (localStorage) в React для функциональных компонентов довольно проста. В этой статье мы рассмотрели основы работы с локальным хранилищем, а также создали пример компонента, который сохраняет и загружает данные из локального хранилища. Обратите внимание, что локальное хранилище имеет некоторые ограничения, такие как максимальный размер данных и доступность только для текущего домена. Поэтому перед использованием локального хранилища важно учитывать эти ограничения и проверять его доступность в браузере пользователя.

Хук useId предоставляет простой способ генерации уникальных идентификаторов для элементов HTML в React. Он может быть особенно полезен в случаях, когда нужно создать несколько экземпляров одного компонента на странице. Прежде чем использовать хук useId, давайте рассмотрим проблему, с которой мы можем столкнуться без его помощи. Предположим, у нас есть компонент EmailForm, который содержит поля ввода для ввода электронной почты. Если мы просто создадим несколько экземпляров этого компонента на странице, у нас возникнут проблемы с идентификаторами элементов HTML.

function EmailForm() {
  return (
    <>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </>
  )
}

В приведенном выше коде htmlFor явно указывает на идентификатор email, и это работает, когда у нас только один экземпляр формы на странице. Однако, если мы решим отобразить несколько форм на одной странице, это приведет к нескольким элементам input с одним и тем же идентификатором email. Это не только некорректно с точки зрения стандартов HTML, но и может вызывать проблемы с доступностью и взаимодействием пользователей с формами.

Чтобы решить эту проблему, мы можем использовать хук useId, который предоставляет уникальный идентификатор для каждого экземпляра компонента.

function EmailForm() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  )
}

Хук useId создает уникальный идентификатор для каждого вызова в компоненте. Теперь, когда мы отображаем несколько форм на странице, у каждого элемента input есть уникальный идентификатор, что позволяет нам избежать проблем с повторяющимися идентификаторами. Еще одно преимущество использования хука useId заключается в том, что сгенерированные идентификаторы остаются постоянными между рендерами. Это особенно важно при рендеринге на стороне сервера, когда идентификаторы должны быть согласованы между сервером и клиентом. В заключение, хук useId является мощным инструментом для генерации уникальных идентификаторов в React. Он обеспечивает легкость использования и надежность и может быть полезным во множестве сценариев разработки.