How to tell whether the page is refreshed or closed, background: Vue project, requirements: Close the page, next time jump to the landing page

Recent projects have this requirement: to close the window of the current system, log out,

Because if there is a security risk if you do not sign out, actually I want to say that the computer is okay don't lend someone alive to leave the station remember to lock screen, in fact, we set a cookie expiration time, after a period of time will automatically empty cookies.

After I check the information, I try various methods on the Internet, found that there are problems.

Summarize this attempt:

First, the page load only executes the onload, the page closes only executes the onunload, the page refreshes executes the onbeforeunload, then onunload, finally onload.

I have been proven to conclude that:

When the page loads only when the onload//page is refreshed, the onbeforeunload event is executed before the refresh, and the OnUnload event is the last onload event when the new page is about to replace the old page. When the page closes, onbeforeunload the event before onunload the event.

(2) for Firefox:

When the page refreshes, only the onunload is executed; When the page closes, only the onbeforeunload event is executed. So how do you tell if the browser is off or refreshing? I've been experimenting with all the times on the Internet.

Second, wit's judgment page refresh or close

Key: The OnLoad method is executed after the refresh completes, and the cookie is emptied according to the session flag variable.

My idea is: refresh and close, regardless of which browser will execute OnUnload method or onBeforeUnload method, in fact, we can not judge in these two methods, but after the refresh will be executed again the OnLoad method, So I put a flag-bit variable in the session in both methods. Then, when the OnLoad method executes, determine if there is a variable in the session, if so, the description is refresh, or it is closed.

Import Cookies from ' Js-cookie '/*distinguish shutdown and refresh, close exit login start*/window.onload=function(){ if(!window.sessionstorage["Tempflag"]) {Cookies.remove (' UserId ') Cookies.remove (' UserName ') location.reload (); //cannot save, force jump to landing page}Else{Window.sessionStorage.removeItem ("Tempflag"); }}window.onunload=function() {window.sessionstorage["Tempflag"] =true;} Window.onbeforeunload=function() {window.sessionstorage["Tempflag"] =true;}

The current project is used in a feasible, insufficient place: multiple pages of a system open at the same time, turn off one of the pages will also empty cookies, re-login

Who let the project log in with the cookie is stored, if replaced by the session storage login information is not the same