How to prevent same website open multiple tab pages?

Question

I have a scenario that prevents the same website in multiple opened tab pages of browser. My idea is when user open a website at first time from browser, it's fine, when user produces the new tab page or external link to open the same website again, we should redirect it to already opened one. I have no idea how to implement. Can I have some clues? Thanks.

"we should redirect it to already opened one" --- what does this exactly mean? — zerkms, Nov 18 '15 at 00:01
User can always just open use another browser or another computer to open another view onto the web site. So, basically you cannot ever prevent this. Your web-site should be able to handle multiple tabs viewing the same state. — jfriend00, Nov 18 '15 at 00:22
Currently, I just want to implement within same browser. Not worried about different browsers. — crazy_develerper, Nov 18 '15 at 00:41

Joshua Herreid · Answer 1 · 2015-11-18T00:22:34.270

4

Perhaps use local storage.

Window.onload=function(){

if(localStorage.getItem('windows')===1){

window.close();

}else{

localStorage.setItem("windows",1);
}

}

Window.onbeforeunload=function(){
localStorage.setItem("windows",0);
}

edited Nov 18 '15 at 00:22

answered Nov 18 '15 at 00:06

Joshua Herreid

41
1
4

2

So if for some reason `onbeforeunload` was not triggered - a user would never be able to open the site? – zerkms Nov 18 '15 at 00:14
localstorage is only supplied to HTML5, is it? – crazy_develerper Nov 18 '15 at 00:20
And, if your browser ever crashes or the computer shuts down abruptly, so the localStorage item is not cleared, you can never get your page open again. Not a good failure mode. – jfriend00 Nov 18 '15 at 00:23
Just set/read a session cookie via JS, instead of localStorage – Marco Marsala Feb 23 '21 at 22:11

score 4 · Answer 2 · answered Dec 17 '19 at 10:35

I recently ran across a similar problem where I had to prevent that multiple windows/tabs operated on the same localStorage.

The solution was to use StorageEvents: every window receives a StorageEvent whenever another(!) window made changes to the same localStorage as this one uses.

Thus, the trick was to define a "dummy" key for localStorage and let every window write some random value into that key just to let all other windows using the same localStorage receive a StorageEvent:

  window.addEventListener('storage', () => {
    window.alert('another window or tab is working on the same localStorage')
  }, false)

  localStorage.setItem('Sentinel',Math.random())

How to prevent same website open multiple tab pages?

2 Answers2

Linked