当用户关闭浏览器选项卡时，用于保存到 localStorage 的 useEffect 钩子

Question

我想保存key:value到localStorage使用的“清理回报”useEffect()挂钩。

这是我的代码：

  useEffect(() => {

    const onbeforeunloadFn = () => {
      localStorage.setItem('color', 'red')
    }

    window.addEventListener('onbeforeunload', onbeforeunloadFn);
    return () => {
      window.removeEventListener('onbeforeunload', onbeforeunloadFn);
    }
  }, [])

我甚至在试图onbeforeunloadFn handler以prevent默认行为，并返回一个string，但它也不能正常工作。遵循onbeforeunload 文档

任何人能解释我为什么要不我怎么能做出这样的代码，以便它的工作原理只是用户接近的时候browser tab？谢谢

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