Блог

Главная - Вопросы по программированию - Реализовать автоматическое сохранение с помощью локального хранилища в пользовательском текстовом поле с помощью React

Реализовать автоматическое сохранение с помощью локального хранилища в пользовательском текстовом поле с помощью React

#javascript #reactjs #local-storage

#javascript #reactjs #локальное хранилище

Вопрос:

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

 const Editor = ({ data, setFieldValue, fieldProps, t }) => {
    const editorName = fieldProps.name;
    const [editorData, setEditorData] = useState(
        element.setData(editorName, data)
    );
    const storageData = localStorage.getItem(`editorData`);
    useEffect(() => {
        setFieldValue(
            editorName,
            element.convertDataToFieldType(editorName, editorData)
        );
        setInterval(function() {
            localStorage.setItem(`editorData`, JSON.stringify(editorData));
        }, 20000);
    }, [editorData]);

    return (
        <Pages
            editorData={JSON.parse(storageData) || editorData}
            setEditorData={setEditorData}
            editorName={editorName}
            setFieldValue={setFieldValue}
        />
    );
};

В компоненте Pages внутри возврата я беру данные локального хранилища, а если нет, то данные редактора.

Комментарии:

1. Я не совсем уверен, что вы пытаетесь сделать. Где находится функция onChange?

2. Я имею в виду из EditorData, в основном, когда я монтирую компонент, я хочу сначала использовать локальное хранилище для извлечения данных из редактора, но затем я хочу использовать EditorData

Ответ №1:

Я не уверен, что правильно понял вашу проблему, но я предлагаю, чтобы вы могли использовать sessionStorage вместо localStorage. Это также позволяет вам сохранять данные в браузере, но если вы закроете вкладку или браузер, эти данные будут удалены. Таким образом, вы можете использовать его, и каждый раз, когда вы хотите получить доступ к своим данным, вы можете просто проверить, есть ли какие-либо данные в вашем sessionStorage, если они есть — просто возьмите их, если нет — используйте свою функцию. Таким образом, если пользователь закроет окно, в следующий раз, когда он его откроет — sessionStorage будет пустым