Close the browser / tab all closed, log out

Achieve results: 1,the browser is closed/tabs all closed/exit button is clicked, log out. 2, the browser can only log on at the same time an account, login time, other tabs open all entered the home.

 analysis:

1. Save account information after a successful login.
2. Open the browser tab to perform onload event method, refresh the page execution onbeforeunload - " onload event method, close the browser and close tabs perform onbeforeunload event method.
3. Difficulty : Close the browser does not provide separate browser tabs and closed methods.
4. Solution: use onbeforeunload and onload execution sequence of events, in the onload clearing account information event method, the Log.

 

Operation analysis:

1) : Open the page for the first time to perform onload method, if first opened, localTime, sesTime, a Numbers have no value, the first If statement, clearing localStorage and sessionStorage value, to re- localTime, sesTime assignment, a Numbers ++, this time = 0 a Numbers .

2) : refresh the page to perform onbeforeunload method, current localTime, sesTime have equal value and, numbers-- , case numbers = 0; then execute onload method. At this time localTime, sesTime has a value, Numbers ++, case numbers = 1;

3) : to open a new tab again performed onload method, then localTime has a value and Numbers =. 1 , the implementation of the second if statement, to sesTime assignment. numbers ++, case numbers = 2;

 

 Code:

// refresh the page when first entering onbeforeunload  method

window.onbeforeunload = () => {

　　let numbers = window.localStorage.getItem('numbers');

　　const sesTime = window.sessionStorage.getItem ( 'sesTime');

　　const localTime = window.localStorage.getItem('localTime');

　　// When localTime  no value, and sesTime === localTime , minus the current page.

　　if (localTime != 'NaN' && localTime != null && sesTime === localTime) {

　　　　numbers = parseInt(numbers) - 1;

　　　　window.localStorage.setItem('numbers', numbers)

　　}

};

 

window.onload = () => {

　　let time = '';

　　let numbers = window.localStorage.getItem ( 'numbers'); // Number of calculated open tabs

　　const sesTime = window.sessionStorage.getItem ( 'sesTime');

　　const localTime = window.localStorage.getItem ( 'localTime'); // first time login

 

// numbers when no value or smaller than 0, the numbers of  assignment 0

if (numbers == 'NaN' || numbers === null || parseInt(numbers) < 0) {

　　numbers = 0;

}

// sesTime || localTime no value, and the numbers 0, clearing localStorage in login status, exit to the login page

if ((sesTime === null || sesTime === 'NaN' || LOCALTIME === null ||

localTime === 'NaN') && parseInt(numbers) === 0) {

localStorage.clear();

sessionStorage.clear();

// to localTime and sesTime assignment, record the first time a tab

time = new Date().getTime();

window.sessionStorage.setItem('sesTime', time);

window.localStorage.setItem('localTime', time);

router.push('/login');

}

// When Time  , localTime  has a value, and sesTime! = LocalTime when, as sesTime assignment

if (!time && localTime != 'NaN' && localTime != null && sesTime != localTime) {

　　window.sessionStorage.setItem('sesTime', localTime);

}

// Finally, save the current tab is the first of several

numbers = parseInt(numbers) + 1;

window.localStorage.setItem('numbers', numbers);

};