当用户关闭“浏览器”选项卡时，使用效果将挂钩保存到localstorage

Question

我正在尝试使用useEffect()钩的"清理返回"将key:value保存到localStorage。

这是我的代码：

  useEffect(() => {
    const onbeforeunloadFn = () => {
      localStorage.setItem('color', 'red')
    }
    window.addEventListener('onbeforeunload', onbeforeunloadFn);
    return () => {
      window.removeEventListener('onbeforeunload', onbeforeunloadFn);
    }
  }, [])

我什至在onbeforeunloadFn handler中尝试了prevent默认行为并返回string，但也无法正常工作。遵循OnBeforeunload doc

任何人都可以向我解释为什么或如何制作此代码，以便在用户关闭browser tab时，它可以工作 JUST ？谢谢

Answer 1

就像@alexanderstaroselsky提到的那样，我认为您只是拼写了事件名称。

useEffect(() => {
    const onbeforeunloadFn = () => {
      localStorage.setItem('color', 'red')
    }
    window.addEventListener('beforeunload', onbeforeunloadFn);
    return () => {
      window.removeEventListener('beforeunload', onbeforeunloadFn);
    }
  }, [])

有趣的是，您提到的文档的英语版本有一个稍有不同的示例，可能会帮助您确定错误：

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };