在前端项目中监听浏览器事件，关闭，刷新，后退事件
需求：从页面A 跳到详情页面C，页面A需要保持跳转之前的状态，但是页面A跳转页面B 的时候，需要清空缓存，我主要用react-activation 来实现，在页面A 的路由配置页加 keep-alive ，此时，页面A跳详情C，再返回页面A 的时候，不需要任何处理～但是页面A跳到页面B 的时候，就需要用react-activation 的useAliveController 的clear 方法 来实现～
<span onClick="go('1')">页面A</span><span onClick="go('2')">页面B</span>
<script>
const go = (key) => {
if(clear){
clear()
}
}
</script>
此时已完全满足上面的需求，但是突然发现从A跳到C，在跳到B ， 如果点击浏览器上面的后退按钮到B 页面，在从B返回A 的时候，A页面无法输入～～主要是因为A页面没有clear 掉。所以此时需要加一个浏览器后退的监听
const clearFun = () => {
if(clear){
clear()
}
}
useEffect(() => {
window.addEventListener('popstate', clearFun);
return () =>{
window.removeEventListener('popstate', clearFun);
}
})
扩展一下浏览器的事件
beforeunload beforeunload事件是在页面即将卸载时触发的，这通常发生在用户关闭或刷新页面之前。我们可以利用这个事件来提示用户确认是否真的需要离开当前页面。
unload 当文档被完全卸载后，unload事件会被触发。该事件可以用来执行一些清理操作，比如清除cookies，记录日志等。
popstate。 浏览器后退按钮触发的是popstate事件，它通常与HTML5的历史API结合使用