大家好
我想請問在製作會員系統時,
登入後,我會將會員的id跟token等相關資料存放在localStorage,
防止頁面重新整理時,才不會遺失登入狀態。
問題是,我想在瀏覽器關閉時,就將localStorage的資料,全部刪除。
卻遇到瀏覽器關閉事件的code跟重新整理事件是一樣的...
這樣重整時,就將localStorage的資料,全部刪除.....
下面是我的code,不過還是無法分辨 瀏覽器關閉/重新整理事件
//script
const saveData = function(){
localStorage.setItem('user',JSON.stringify({name:'123',token:1114233242}))
location.reload()
}
const gap_time= ref(0)
const beforeUnload_time = ref(0)
const beforeunloadHandler = function() {
beforeUnload_time.value = new Date().getTime()
}
const unloadHandler = function() {
gap_time.value = new Date().getTime() - beforeUnload_time.value
//判斷是窗口關閉還是刷新 毫秒數判斷 網上大部分寫的是5
if (this.gap_time <= 10) {
return confirm("刷新")
} else {
return confirm("確定要離開本系統麼?")
}
}
onMounted(()=>{
window.addEventListener("beforeunload", ()=>beforeunloadHandler())
window.addEventListener("unload", ()=>unloadHandler())
})
onUnmounted(()=>{
window.removeEventListener("beforeunload",()=>beforeunloadHandler())
window.removeEventListener("unload",()=>unloadHandler())
})
-----更新------
謝謝你們~
sessionStorage可以符合我的需求
因為我不是做購物網頁,又擔心安全問題(如果有人使用他電腦,就會自動登入了),
所以我就想說讓使用者離開瀏覽器後,自動刪除資料
下次強迫他再登入XD,提高安全性
基本上來說。不是換成 sessionStorage (瀏覽器關閉就消失)
就是從開啟網頁下手。
關閉瀏覽器判斷。很容易發生事件不運行的問題。
所以我都是從開網頁做判斷處理。正常來說用的方式也就是你用的存活時間。
也就是說,將 localStorage 給個期限值而已。
通常來說
不會關掉頁面就刪除 token
基本上後端給予 token
會附上 到期時間
將這兩者加入至 localStorage
就不用去思考哪時刪除問題
目前你的問題在網上沒有正解sessionStorage
雖然很接近,但也會儲存在紀錄中
所以還是設到期期限會是最好的辦法