iT邦幫忙

0

Vue3如何監控重新整理還是關閉瀏覽器事件

  • 分享至 

  • xImage

大家好
我想請問在製作會員系統時,
登入後,我會將會員的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可以符合我的需求
/images/emoticon/emoticon41.gif
因為我不是做購物網頁,又擔心安全問題(如果有人使用他電腦,就會自動登入了),
所以我就想說讓使用者離開瀏覽器後,自動刪除資料
下次強迫他再登入XD,提高安全性

那你其實可以改用 sessionStorage
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2021-12-09 09:11:32
最佳解答

基本上來說。不是換成 sessionStorage (瀏覽器關閉就消失)
就是從開啟網頁下手。

關閉瀏覽器判斷。很容易發生事件不運行的問題。
所以我都是從開網頁做判斷處理。正常來說用的方式也就是你用的存活時間。

也就是說,將 localStorage 給個期限值而已。

0

通常來說
不會關掉頁面就刪除 token
基本上後端給予 token 會附上 到期時間
將這兩者加入至 localStorage 就不用去思考哪時刪除問題

目前你的問題在網上沒有正解
sessionStorage 雖然很接近,但也會儲存在紀錄中
所以還是設到期期限會是最好的辦法

我要發表回答

立即登入回答