javascript 如何在用户退出页面之前将数据存储在本地存储中？

5n0oy7gb 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(214)

我想在用户导航到另一个页面之前将一些数据存储在本地存储中。我已经尝试使用useBeforeUnload，但它不起作用。

useBeforeUnload(
    useCallback(() => {
      localStorage.setItem(`formCreation${id}${revisionNo}`, formData);
    }, [])
  );

我还尝试在卸载前使用window.addEventListener，但由于它是一个使用react路由器的单页应用程序，即使用户路由到另一个页面，它也不会将数据存储在本地存储中。

window.addEventListener('beforeunload', function (event)

我能做些什么来解决这个问题？

JavaScript

来源：https://stackoverflow.com/questions/75859065/how-to-store-data-in-localstorage-before-user-exits-page-user-react-router

2条答案

按热度按时间

fhity93d1#

beforeunload事件，即当浏览器窗口/选项卡关闭或用户完全导航到另一个外部URL时，与简单卸载React组件不同，即当单击链接时，React应用程序导航到内部路由路径。
如果你想在组件被渲染的路径被导航离开时捕获一些值并保存到localStorage，那么在组件卸载时使用useEffect钩子的cleanup函数来执行。由于你只想让这个效果运行一次，你可能需要将这个逻辑与另一个useEffect钩子和一个React ref耦合起来，以缓存一个你想在组件卸载时持久化的值。

const formDataRef = React.useRef();

useEffect(() => {
  formDataRef.current = formData;
}, [formData]);

useEffect(() => {
  () => {
    localStorage.setItem(`formCreation${id}${revisionNo}`, formDataRef.current);
  };
}, []);

如果你想涵盖组件卸载***和浏览器上下文被关闭/卸载的两种情况，那么将上述情况与beforeunload事件侦听器结合起来。
示例：

const formDataRef = React.useRef();

useEffect(() => {
  formDataRef.current = formData;
}, [formData]);

useEffect(() => {
  const saveData = () => {
    localStorage.setItem(`formCreation${id}${revisionNo}`, formDataRef.current);
  };

  window.addEventListener('beforeunload', saveData);

  return () => {
    window.removeEventListener('beforeunload', saveData);
    saveData();
  };
}, []);

赞(0）回复(0）举报 2023-03-28

unftdfkk2#

useEffect(() => {
  const saveData = () => {
    localStorage.setItem(`formCreation${id}${revisionNo}`, formDataRef.current);
  };

  window.addEventListener('beforeunload', saveData);

  return () => {
    saveData();
    window.removeEventListener('beforeunload', saveData);
   
  };
}, []);

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 如何在用户退出页面之前将数据存储在本地存储中？

2条答案

相关问题

热门标签

最新问答