如何在reactjs中恢复数据时显示弹出窗口

Question

当使用钩子在reactjs中恢复数据或刷新页面时，我想显示弹出窗口

1. 打开页面，不显示弹出窗口
2. 填写表单，不提交，只填写字段
3. 关闭页面或重新加载页面
4. 再次打开页面
5. 显示要恢复数据的弹出窗口
6. 数据正在恢复

如何制作它们？谢谢

Answer 1

您可以在beforeunload事件中将您的状态作为JSON字符串放入本地存储。

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>
);
}

Answer 2

您必须将数据保存在某个位置，例如本地存储中：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

当您重新加载或关闭页面时，React状态下的数据不会持久存在。