В веб-разработке часто встречаются ситуации, когда вам необходимо сохранить данные локально и обеспечить их сохранение даже после обновления страницы. Next.js, популярный фреймворк для создания приложений React, предоставляет несколько методов достижения этой цели с использованием локального хранилища. В этой статье мы рассмотрим различные подходы к сохранению данных в локальном хранилище и сохранению их при обновлениях в приложении Next.js. Для иллюстрации каждого метода мы предоставим примеры кода.

Метод 1: использование перехватчика useEffect
Один из способов сохранить данные в локальном хранилище после обновления — использовать перехватчик useEffect, предоставляемый React. Этот хук позволяет нам выполнять побочные эффекты в функциональных компонентах, например сохранять данные в локальном хранилище.

import React, { useEffect, useState } from 'react';
const MyComponent = () => {
  const [data, setData] = useState('');
  useEffect(() => {
    const savedData = localStorage.getItem('myData');
    if (savedData) {
      setData(savedData);
    }
  }, []);
  const handleChange = (e) => {
    setData(e.target.value);
  };
  useEffect(() => {
    localStorage.setItem('myData', data);
  }, [data]);
  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
    </div>
  );
};

В этом примере мы используем два хука useEffect. Первый запускается только один раз, когда компонент монтируется ([]), извлекает сохраненные данные из локального хранилища и обновляет состояние компонента. Второй хук useEffectпрослушивает изменения в состоянии dataи сохраняет их в локальном хранилище при каждом изменении.

Метод 2: использование пользовательского перехватчика
Другой подход — создать собственный перехватчик для инкапсуляции логики локального хранилища. Это способствует возможности повторного использования и обеспечивает чистоту кода компонента.

import { useState, useEffect } from 'react';
const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const savedValue = localStorage.getItem(key);
    return savedValue ? JSON.parse(savedValue) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
};
// Usage in a component
const MyComponent = () => {
  const [data, setData] = useLocalStorage('myData', '');
  const handleChange = (e) => {
    setData(e.target.value);
  };
  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
    </div>
  );
};

Здесь мы определяем специальный крючок useLocalStorage, который абстрагирует логику локального хранилища. Он принимает keyи initialValueв качестве параметров, извлекает сохраненное значение из локального хранилища и обновляет сохраненное значение при каждом его изменении. Перехватчик useLocalStorageзатем используется в MyComponentдля сохранения и получения данных.

Метод 3: использование Next.js getServerSideProps
Если вам нужны данные, отображаемые на сервере, которые сохраняются при обновлениях, вы можете использовать функцию getServerSidePropsNext.js. Эта функция выполняется на стороне сервера и позволяет вам получать данные и передавать их в качестве реквизита вашему компоненту.

import React from 'react';
const MyComponent = ({ data }) => {
  const handleChange = (e) => {
    // Handle data changes
  };
  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
    </div>
  );
};
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();
  return {
    props: {
      data: jsonData,
    },
  };
}
export default MyComponent;

В этом примере функция getServerSidePropsизвлекает данные из конечной точки API и передает их в качестве свойства MyComponent. Поскольку данные извлекаются на стороне сервера, они будут доступны и сохраняются при обновлениях.

В этой статье мы рассмотрели различные методы сохранения данных в локальном хранилище и их сохранения при обновлениях в приложении Next.js. Мы рассмотрели использование хука useEffect, создание собственного хука и использование функции getServerSidePropsв Next.js. Внедрив эти методы, вы можете гарантировать, что ваши данные останутся нетронутыми даже после обновления страницы, обеспечивая более плавное взаимодействие с пользователем.

Не забудьте выбрать подходящий метод в зависимости от ваших конкретных требований и учитывать последствия для безопасности хранения конфиденциальных данных в локальном хранилище.

Применяя эти методы в своих приложениях Next.js, вы можете повысить устойчивость данных и обеспечить более надежный пользовательский опыт.