ryanbekabe · February 23, 2021 21:11
diff --git a/deteksimultitab.html b/deteksimultitab.html
 <html>
 <div id="result">

 </div>

 <script>
 let localStorageTimeout = 15 * 1000; // 15,000 milliseconds = 15 seconds.
 let localStorageResetInterval = 10 * 1000; // 10,000 milliseconds = 10 seconds.
 let localStorageTabKey = 'test-application-browser-tab'; //https://stackoverflow.com/questions/11008177/stop-people-having-my-website-loaded-on-multiple-tabs/45717724#45717724
 let sessionStorageGuidKey = 'browser-tab-guid'; //https://jsfiddle.net/yex8k2ts/30/

 function createGUID() {
  let guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    /*eslint-disable*/
    let r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    /*eslint-enable*/
    return v.toString(16);
  });

  return guid;
 }

 /**
 * Compare our tab identifier associated with this session (particular tab)
 * with that of one that is in localStorage (the active one for this browser).
 * This browser tab is good if any of the following are true:
 * 1.  There is no localStorage Guid yet (first browser tab).
 * 2.  The localStorage Guid matches the session Guid.  Same tab, refreshed.
 * 3.  The localStorage timeout period has ended.
 *
 * If our current session is the correct active one, an interval will continue
 * to re-insert the localStorage value with an updated timestamp.
 *
 * Another thing, that should be done (so you can open a tab within 15 seconds of closing it) would be to do the following (or hook onto an existing onunload method):
 *		window.onunload = () => { 
 				localStorage.removeItem(localStorageTabKey);
      };
 */
 function testTab() {
  let sessionGuid = sessionStorage.getItem(sessionStorageGuidKey) || createGUID();
  let tabObj = JSON.parse(localStorage.getItem(localStorageTabKey)) || null;

 	sessionStorage.setItem(sessionStorageGuidKey, sessionGuid);

  // If no or stale tab object, our session is the winner.  If the guid matches, ours is still the winner
  if (tabObj === null || (tabObj.timestamp < new Date().getTime() - localStorageTimeout) || tabObj.guid === sessionGuid) {
    function setTabObj() {
      let newTabObj = {
        guid: sessionGuid,
        timestamp: new Date().getTime()
      };
      localStorage.setItem(localStorageTabKey, JSON.stringify(newTabObj));
    }
    setTabObj();
    setInterval(setTabObj, localStorageResetInterval);
    return true;
  } else {
    // An active tab is already open that does not match our session guid.
    return false;
  }
 }

 if (testTab()) {
  document.getElementById('result').innerHTML = 'tab is good';
 } else {
  document.getElementById('result').innerHTML = 'tab is bad';
 }
 </script>


 </html>
	<html>
	<div id="result">

	</div>

	<script>
	let localStorageTimeout = 15 * 1000; // 15,000 milliseconds = 15 seconds.
	let localStorageResetInterval = 10 * 1000; // 10,000 milliseconds = 10 seconds.
	let localStorageTabKey = 'test-application-browser-tab'; //https://stackoverflow.com/questions/11008177/stop-people-having-my-website-loaded-on-multiple-tabs/45717724#45717724
	let sessionStorageGuidKey = 'browser-tab-guid'; //https://jsfiddle.net/yex8k2ts/30/

	function createGUID() {
	let guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
	/eslint-disable/
	let r = Math.random() * 16 \| 0,
	v = c == 'x' ? r : (r & 0x3 \| 0x8);
	/eslint-enable/
	return v.toString(16);
	});

	return guid;
	}

	/**
	* Compare our tab identifier associated with this session (particular tab)
	* with that of one that is in localStorage (the active one for this browser).
	* This browser tab is good if any of the following are true:
	* 1. There is no localStorage Guid yet (first browser tab).
	* 2. The localStorage Guid matches the session Guid. Same tab, refreshed.
	* 3. The localStorage timeout period has ended.
	*
	* If our current session is the correct active one, an interval will continue
	* to re-insert the localStorage value with an updated timestamp.
	*
	* Another thing, that should be done (so you can open a tab within 15 seconds of closing it) would be to do the following (or hook onto an existing onunload method):
	* window.onunload = () => {
	localStorage.removeItem(localStorageTabKey);
	};
	*/
	function testTab() {
	let sessionGuid = sessionStorage.getItem(sessionStorageGuidKey) \|\| createGUID();
	let tabObj = JSON.parse(localStorage.getItem(localStorageTabKey)) \|\| null;

	sessionStorage.setItem(sessionStorageGuidKey, sessionGuid);

	// If no or stale tab object, our session is the winner. If the guid matches, ours is still the winner
	if (tabObj === null \|\| (tabObj.timestamp < new Date().getTime() - localStorageTimeout) \|\| tabObj.guid === sessionGuid) {
	function setTabObj() {
	let newTabObj = {
	guid: sessionGuid,
	timestamp: new Date().getTime()
	};
	localStorage.setItem(localStorageTabKey, JSON.stringify(newTabObj));
	}
	setTabObj();
	setInterval(setTabObj, localStorageResetInterval);
	return true;
	} else {
	// An active tab is already open that does not match our session guid.
	return false;
	}
	}

	if (testTab()) {
	document.getElementById('result').innerHTML = 'tab is good';
	} else {
	document.getElementById('result').innerHTML = 'tab is bad';
	}
	</script>


	</html>