Работа с локальным хранилищем (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 для функциональных компонентов довольно проста. В этой статье мы рассмотрели основы работы с локальным хранилищем, а также создали пример компонента, который сохраняет и загружает данные из локального хранилища. Обратите внимание, что локальное хранилище имеет некоторые ограничения, такие как максимальный размер данных и доступность только для текущего домена. Поэтому перед использованием локального хранилища важно учитывать эти ограничения и проверять его доступность в браузере пользователя.

1. Определите значение по умолчанию

Вызов fetch() является асинхронным методом, поэтому нам нужно использовать значение по умолчанию до тех пор, пока REST API не вернет ответ. Определение неправильных значений по умолчанию вызовет ошибки JavaScript еще до вызова fetch(), поэтому убедитесь, что значение по умолчанию указано в React JS коде. В нашем случае, так как мы ожидаем массив из вызова API, значением по умолчанию будет пустой массив.

const defaultValue = []

2. Объявите состояние React для хранения данных из API

Нам нужно объявить состояние React для хранения списка пользователей, возвращенного из ответа на вызов API. Обновление состояния с помощью setUsers() гарантирует, что экран обновится после получения списка пользователей из вызова REST API.

// Состояние для хранения списка пользователей
const [users, setUsers] = useState(defaultValue);

3. JavaScript функции для получения данных из API и сохранения ответа

Нам нужно объявить JS-функцию для получения данных с внешнего URL-адреса следующим образом:

1. Мы получаем данные из URL-адреса https://jsonplaceholder.typicode.com/todos/ с помощью JavaScript fetch() API.
2. Добавьте функцию обратного вызова в then() для преобразования ответа в формат JSON.
3. Состояние пользователя React обновляется списком пользователей из ответа API.

// Функция для сохранения данных
const getApiData = async () => {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/todos/"
  ).then((response) => response.json());

  // Обновим состояние
  setUsers(response);
};

4. Добавьте useEffect для получения API при загрузке страницы

После того, как мы определили функцию для получения данных API, она должна срабатывать при загрузке страницы. getApiData(), добавленный в React useEffect() с пустым массивом зависимостей, который гарантирует, что код срабатывает один раз при загрузке страницы.

useEffect(() => {
  getApiData();
}, []);

5. Генерация JSX-кода с состоянием React

Наконец, нам нужно отобразить сведения о каждом пользователе. Следовательно, мы сгенерируем JSX-код для каждого пользователя с помощью Array.map(), а функция обратного вызова вернет <div></div> с user.id и user.title.

<div className="app">
  {users.map((user) => (
      <div className="item-container">
        Id:{user.id} <div className="title">Title:{user.title}</div>
      </div>
   ))}
</div>

6. Вызов API через Axios

Основной недостаток вызова fetch() заключается в том, что нам пришлось вручную конвертировать данные из API в формат JSON. Существует npm пакет axios, который сам управляет преобразованием JSON. После установки npm install axios в package.json, можно реализовать метод getAPIData() через axios следующим образом:

import axios from "axios";

const getApiData = async () => {
  const response = await axios(
    "https://jsonplaceholder.typicode.com/todos/"
  );

  setUsers(response);
};

Полный код решения

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [users, setUsers] = useState([]);

  const getApiData = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos/"
    ).then((response) => response.json());

    setUsers(response);
  };

  useEffect(() => {
    getApiData();
  }, []);

  return (
    <div className="app">
      {users.map((user) => (
          <div className="item-container">
            Id:{user.id} <div className="title">Title:{user.title}</div>
          </div>
        ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Чтобы изучить React с нуля и понять все тонкости работы с React пройдите наш авторский курс от создателей канала DevMagazine - Быстрый старт в React.