useEffect 挂钩，用于在用户关闭浏览器选项卡时保存到 localStorage

Question

我正在尝试使用 useEffect() 挂钩的 "cleanup return" 将 key:value 保存到 localStorage。

这是我的代码：

  useEffect(() => {

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

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

我什至尝试了 onbeforeunloadFn handler 到 prevent 默认行为和 return 到 string 但它也不起作用。继 onbeforeunload doc

任何人都可以向我解释为什么或如何使此代码在用户关闭 browser tab 时仅起作用吗？谢谢

Answer 1

就像@AlexanderStaroselsky 提到的，我认为您只是稍微拼错了事件名称。

useEffect(() => {

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

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

有趣的是，English language version of the doc you referred to 有一个略有不同的示例，可能会帮助您识别错误：

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

useEffect 挂钩，用于在用户关闭浏览器选项卡时保存到 localStorage

useEffect hook for saving to localStorage when user closes the browser tab

local-storage

reactjs

react-hooks