Блог

Я хотел бы показать всплывающее окно при восстановлении данных или обновлении страницы в reactjs с помощью hook

1. открыть страницу, не показывать всплывающее окно
2. заполните форму, не отправляйте, только заполняйте поля
3. закрыть страницу или перезагрузить страницу
4. снова откройте страницу
5. показать всплывающее окно хотите восстановить данные
6. данные восстанавливаются

Как я могу их приготовить ? Спасибо

Вы можете поместить свое состояние в виде строки JSON в localstorage при событии beforeunload.

 import React from "react";

const saveState = (state) => {
  localStorage.setItem("yourKey", JSON.stringify({
      time: Date.now(),
      data: state
    })
  );
};

const loadState = () => {
  const str = localStorage.getItem("yourKey");
  if (str == null) return null;
  const obj = JSON.parse(str);
  if (obj.time > Date.now()   60000) //Date.now() returns time in miliseconds
    return null; //stored data is too old
  return obj.data;
};

export default function App() {
  const [data, setData] = React.useState(loadState() || {
      name: "",
      another: ""
    }
  );

  const handleData = React.useCallback(() => {
    saveState(data);
  }, [data]);

  React.useEffect(() => {
    window.addEventListener("beforeunload", handleData, false);
    return () => window.removeEventListener("beforeunload", handleData);
  }, [handleData]);

  return (
    <div>
      Name
      <input
        value={data.name}
        onChange={(e) => setData((p) => ({ ...p, name: e.target.value }))}
      />
      Another
      <input
        value={data.another}
        onChange={(e) => setData((p) => ({ ...p, another: e.target.value }))}
      />
    </div>
  );
}

 

Вы должны где-то сохранить данные, например, в локальном хранилище: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Данные в состояниях реакции не сохраняются при перезагрузке или закрытии страницы.