React: свои хуки для работы с localStorage

React часто используется для создания интерфейсов, в которых требуется сохранять данные между сессиями. Для таких задач прекрасно подходит localStorage — встроенное хранилище браузера, которое сохраняет данные на длительное время. В этой статье мы подробно разберём, как создать собственные хуки для удобной работы с localStorage в React.

Основные функции localStorage

localStorage — это механизм для хранения данных в браузере, который сохраняет данные до тех пор, пока пользователь сам не очистит их или пока они не будут удалены программно. В отличие от sessionStorage, данные в localStorage сохраняются даже после закрытия вкладки или браузера.

Основные методы работы с localStorage:

• localStorage.setItem(key, value) — сохраняет данные с указанным ключом и значением.
• localStorage.getItem(key) — получает данные по ключу.
• localStorage.removeItem(key) — удаляет данные по ключу.
• localStorage.clear() — удаляет все данные из хранилища.

Создание кастомного хука для работы с localStorage

Чтобы многократно не повторять код работы с localStorage в каждом компоненте, имеет смысл создать кастомный хук, который будет выполнять всю работу за нас. Такой хук позволит упростить управление состоянием и обеспечит автоматическую синхронизацию с локальным хранилищем браузера.

Пример реализации хука:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
    // Инициализация состояния с использованием данных из localStorage
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error('Ошибка при чтении из localStorage', error);
            return initialValue;
        }
    });

    // Функция для обновления состояния и localStorage
    const setValue = (value) => {
        try {
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.error('Ошибка при записи в localStorage', error);
        }
    };

    return [storedValue, setValue];
}

export default useLocalStorage;

Этот кастомный хук можно использовать в любых компонентах React, чтобы сохранять и читать данные из localStorage. Состояние автоматически синхронизируется с локальным хранилищем, что делает работу с ним более удобной.

Пример использования кастомного хука

Допустим, у вас есть компонент, который позволяет пользователю выбирать тему (светлую или тёмную) и сохранять её выбор в localStorage. Вы можете легко реализовать это с помощью созданного нами хука:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function ThemeSwitcher() {
    const [theme, setTheme] = useLocalStorage('theme', 'light');

    const toggleTheme = () => {
        setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
    };

    return (
        <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
            <p>Текущая тема: {theme}</p>
            <button onClick={toggleTheme}>Переключить тему</button>
        </div>
    );
}

export default ThemeSwitcher;

Этот пример демонстрирует, как с помощью кастомного хука можно легко сохранить пользовательские предпочтения в localStorage и поддерживать их в интерфейсе.

Ошибки и предостережения

Хотя localStorage — это удобный инструмент, важно помнить о возможных проблемах. Например, не все браузеры одинаково хорошо поддерживают localStorage, и в некоторых случаях (например, в режиме инкогнито) доступ к нему может быть ограничен. Для предотвращения ошибок следует использовать блоки try...catch, как это показано в примерах выше.

Если вас интересует карьера React-разработчика, вы можете ознакомиться с актуальными вакансиями для React-разработчиков. Также полезную информацию можно найти на странице о профессии React разработчик.