【vue】vueブラウザウィンドウを閉じると、localStorageのデータが空になります
2806 ワード
vueブラウザウィンドウを閉じるとlocalStorageのデータが空になります
vueで作った単一ページプログラムの場合は、傍受の方法をAppに置きます.vueは最も柔軟です
二、マルチページのプログラムであれば、各ページで同じようにmountedメソッドでこのイベントを登録すればいい!
ページがリフレッシュされるか閉じるかをどのように機知的に判断するか、背景:vueプロジェクト、需要:ページを閉じて、次は直接ログインページにジャンプします
最近のプロジェクトでは、現在のシステムのウィンドウを閉じたときにログインを終了する必要があります.
ログインを終了しないとセキュリティ上のリスクがあるかもしれませんが、実際には、パソコンが他の人に貸したり、職場を離れたりしないで、必ず画面をロックしなければならないことを覚えています.実は、クッキーの失効時間を設定しています.しばらくすると、自動的にクッキーが空になります.
私が資料を調べて、自分でネット上のいろいろな方法を試してみたところ、問題があった.
この試みをまとめます.
一、ページロード時にonloadのみを実行し、ページクローズ時にonunloadのみを実行し、ページリフレッシュ時にonbeforeunloadを先に実行し、その後onunload、最後にonloadを実行する.
検証の結果、私が得た結論は:
(1)ie,Google,360:
//ページロード時にonload//ページリフレッシュのみを実行する場合、リフレッシュ前にonbeforeunloadイベントを実行し、新しいページが古いページに置き換えられるとonunloadイベント、最後にonloadイベントを実行します.//ページが閉じると、onbeforeunloadイベント、onunloadイベントが開きます.
(2)火狐について:
//ページ更新時、onunloadのみ実行する.ページが閉じるとonbeforeunloadイベントのみが実行されるので、本題に戻り、ブラウザが閉じるかリフレッシュするかをどのように判断しますか?私はネット上のいろいろな説に基づいて何百回も実験したが、成功しなかった.
二、機知に富んだ判断ページを更新するか閉じるか
キー:リフレッシュが完了するとonloadメソッドが実行され、sessionメモリフラグ変数に基づいてクッキーが空になります.
私の考え方は、リフレッシュとクローズで、どのブラウザでもonunloadメソッドまたはonbeforeunloadメソッドを実行しますが、実は私たちはこの2つのメソッドでは判断できませんが、リフレッシュした後にもう一度onloadメソッドを実行するので、私はこの2つのメソッドでフラグビット変数をsessionに入れます.そしてonloadメソッドの実行時にsessionにこの変数があるかどうかを判断し、ある場合はリフレッシュであることを説明し、そうでなければ閉じる.
現在、プロジェクトで使用可能な不足点:1つのシステムの複数のページが同時に開き、そのうちの1つのページを閉じるとクッキーが空になり、再登録されます.
誰がプロジェクトを登録して使うのがcookieが保存するので、もしsessionが登録情報を保存するならば異なっています
vueで作った単一ページプログラムの場合は、傍受の方法をAppに置きます.vueは最も柔軟です
export default {
data () {
return {
theme: this.$store.state.app.themeColor
};
},
mounted () {
},
beforeDestroy () {
},
methods: {
},
mounted(){
// localStorage
window.onbeforeunload = function (e) {
var storage = window.localStorage;
storage.clear()
}
}
};
二、マルチページのプログラムであれば、各ページで同じようにmountedメソッドでこのイベントを登録すればいい!
ページがリフレッシュされるか閉じるかをどのように機知的に判断するか、背景:vueプロジェクト、需要:ページを閉じて、次は直接ログインページにジャンプします
最近のプロジェクトでは、現在のシステムのウィンドウを閉じたときにログインを終了する必要があります.
ログインを終了しないとセキュリティ上のリスクがあるかもしれませんが、実際には、パソコンが他の人に貸したり、職場を離れたりしないで、必ず画面をロックしなければならないことを覚えています.実は、クッキーの失効時間を設定しています.しばらくすると、自動的にクッキーが空になります.
私が資料を調べて、自分でネット上のいろいろな方法を試してみたところ、問題があった.
この試みをまとめます.
一、ページロード時にonloadのみを実行し、ページクローズ時にonunloadのみを実行し、ページリフレッシュ時にonbeforeunloadを先に実行し、その後onunload、最後にonloadを実行する.
検証の結果、私が得た結論は:
(1)ie,Google,360:
//ページロード時にonload//ページリフレッシュのみを実行する場合、リフレッシュ前にonbeforeunloadイベントを実行し、新しいページが古いページに置き換えられるとonunloadイベント、最後にonloadイベントを実行します.//ページが閉じると、onbeforeunloadイベント、onunloadイベントが開きます.
(2)火狐について:
//ページ更新時、onunloadのみ実行する.ページが閉じるとonbeforeunloadイベントのみが実行されるので、本題に戻り、ブラウザが閉じるかリフレッシュするかをどのように判断しますか?私はネット上のいろいろな説に基づいて何百回も実験したが、成功しなかった.
二、機知に富んだ判断ページを更新するか閉じるか
キー:リフレッシュが完了するとonloadメソッドが実行され、sessionメモリフラグ変数に基づいてクッキーが空になります.
私の考え方は、リフレッシュとクローズで、どのブラウザでもonunloadメソッドまたはonbeforeunloadメソッドを実行しますが、実は私たちはこの2つのメソッドでは判断できませんが、リフレッシュした後にもう一度onloadメソッドを実行するので、私はこの2つのメソッドでフラグビット変数をsessionに入れます.そしてonloadメソッドの実行時にsessionにこの変数があるかどうかを判断し、ある場合はリフレッシュであることを説明し、そうでなければ閉じる.
import Cookies from 'js-cookie'
/* ， start*/
window.onload = function(){
if(!window.sessionStorage["tempFlag"]){
Cookies.remove('userId')
Cookies.remove('userName')
location.reload(); // ，
}else{
window.sessionStorage.removeItem("tempFlag");
}
}
window.onunload = function (){
window.sessionStorage["tempFlag"] = true;
}
window.onbeforeunload = function (){
window.sessionStorage["tempFlag"] = true;
}
現在、プロジェクトで使用可能な不足点:1つのシステムの複数のページが同時に開き、そのうちの1つのページを閉じるとクッキーが空になり、再登録されます.
誰がプロジェクトを登録して使うのがcookieが保存するので、もしsessionが登録情報を保存するならば異なっています