window.onstorage 的 removeEventListener？

Question

MDN docs 描述了两种可能的监听存储事件的方法，window.addEventListener('storage', () => { ... }) 和 window.onstorage = () => { ... }。在 React 应用程序中，如果我在 useEffect 挂钩中使用 addEventListener，我想 return 清理函数 window.removeEventListener('storage', ... ) 以避免组件卸载后发生内存泄漏。

但是，window.onstorage = () => { ... } 没有提供删除事件侦听器的方法。这是否意味着无需 return 在 useEffect 挂钩中使用清理函数，以这种方式监听存储事件是安全的？

Answer 1

当你添加一个监听器时

window.onstorage = () => { ... }

从技术上讲，您在存储应用程序中只能有一个侦听器。但是，如果 window.addEventListener 您可以拥有任意数量的事件侦听器，并且清理需要将传递给 addEventListener 的相同函数引用传递给 removeEventListener

您可以通过将存储侦听器函数设置为空来清理它

useEffect(() => {
    // other code
    return () => { window.onstorage = null };
}, []);

window.onstorage 的 removeEventListener？

removeEventListener for window.onstorage?

reactjs

local-storage

addeventlistener

use-effect

removeeventlistener