Javascript 使用React（本地存储）仅显示一次弹出窗口

我想用React钩子只显示一次弹出窗口

首次访问

example.com/campaign/1234

显示弹出窗口

关闭或刷新页面

再次访问

example.com/campaign/1234

，不显示弹出窗口

首次访问

example.com/campaign/0000

（是另一个URL）

显示弹出窗口

关闭或刷新页面

再次访问

example.com/campaign/0000

或

example.com/campaign/1234

，弹出窗口将不显示

你知道怎么做吗？我知道我需要使用

本地存储

，但当用户关闭或刷新页面时，如何触发事件

这是一本书

---

我也读过这篇文章，但它没有提到如何使用钩子来实现它。如果您从未使用来自自定义钩子的

settickystate

回调，状态将保持在初始值

似乎

setStickyState

中也有一个bug，如果密钥发生更改，它将不会更新。下面是一个增强版，我称之为

useLocalStorage

，它应该可以更可靠地工作：

导出函数useLocalStorage（键，初始默认值）{
const[val，setVal]=useState（（）=>{
const localStorageVal=localStorage.getItem（键）；
返回localStorageVal！==null
？JSON.parse（localStorageVal）
：初始化默认值；
});
useffect（（）=>{
if（localStorage.getItem（key）==null）{
setVal（initialDefault）；
}
}，[key，initialDefault]）；
useffect（（）=>{
setItem（key，JSON.stringify（val））；
}，[val，key]）；
返回[val，setVal]；
}

然后您可以这样使用它：

const[visted，setvisted]=useLocalStorage（pageId，false）；
const navigateAway=useCallback（（）=>{
setVisited（真）
}，[setVisited]）
useffect（（）=>{
//如果用户导航到完全不同的站点
//或刷新页面等
window.addEventListener（“卸载前”，导航方式）；
//如果用户导航到同一站点上的其他页面
return（）=>{
导航方式（）；
removeEventListener（“beforeunload”，navigateAway）；
};
}，[pageId，navigateAway]）；
// ...
欢迎来到第{pageId}页

setVisited（真）}>
不再在此页面上显示

下面是一个演示（带有TypeScript）：

---

这就是使用自定义钩子而不是普通的

setState

的全部意义所在。试试看。谢谢你的建议。不幸的是，这是行不通的，因为一旦安装组件，就会设置状态，弹出窗口第一次就不可见。在这种情况下，在需要的地方使用回调

setStickyState（“已访问”）}/>

等。如果用户没有单击弹出窗口并刷新页面怎么办？啊，我现在明白问题了。我认为这部分是由于

setStickyState

hook中的一个bug造成的。编辑答案。