vue3 浏览器关闭后清除cookie和localStorage
小伙伴们开发中会遇到一些非正常关闭浏览器，重新进入网站需要重新登录的需求，本教程就是教大家如何关闭浏览器后，清楚cookie和localStorage
一、在index.html中进行设置
<!DOCTYPE html>
<html lang="en">
<script>
// 关闭页面清除session
// 判断关闭页面之后与再次点开页面得时间，刷新操作时间间隔在20ms，>2000ms时说明是非刷新操作
// 2000ms是通过关闭页面到点击历史纪录进入页面间隔得大概最短时间
var loadTime = function (){
_load_time = new Date().getTime();
unload_time = localStorage.getItem('unload_time')
localStorage.setItem('_load_time', _load_time);
localStorage.setItem('nowload',_load_time-unload_time);
const gap = _load_time-unload_time;
if(gap>2000){
sessionStorage.clear()
localStorage.clear()
}
};
loadTime()
</script>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>citic-robot-ui</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<script>
let _beforeUnload_time = 0, _gap_time = 0, _load_time=0,unload_time =0 ;
window.onunload = function (){
unload_time = new Date().getTime()
localStorage.setItem('unload_time', unload_time);
}
</script>
</body>
</html>
主要就是通过判断载入页面的时间（onload事件）和上次退出页面（onunload）之间的时间差，在每次退出页面（刷新或关闭）时，都往localStorage存值，在载入时取localStorage的值，并且取到载入时的时间与之相减，得到差值，从而判断用户是刷新操作还是关了页面又通过历史纪录进来的操作。将onload事件放到了最上面，之所以这样做是避免受网络速度影响导致载入的时间或长或短从而无法控制在一个具体的范围内。
