Misunderstanding concept of localStorage

Question

I'm using this code published by Sasi Varunan here

<script type="text/javascript">
        // Broad cast that your're opening a page.
        localStorage.openpages = Date.now();

        var onLocalStorageEvent = function(e){
            if(e.key == "openpages"){
                // Listen if anybody else opening the same page!
                localStorage.page_available = Date.now();
            }
            if(e.key == "page_available"){
                alert("One more page already open");
            }
        };
        window.addEventListener('storage', onLocalStorageEvent, false);
</script>

Code is working like charm - doing exactly what I want - detect if an application it's already open in another tab browser or even in another browser window.

From my understanding:

The very first time when the application is started the followings thinks happen:

1. App set openpages key with Date.now() value.
2. Because of 1. storage event listener start onLocalStorageEvent event.
3. Because the openpages key exists, is setting page_available key with Date.now ()
4. When the followings apps are started they find page_available key in storage (the second if) the alert is triggered and I can redirect them to an error page.

QUESTION:

If I close all the browser windows and restart the app in a new winwdow everything still works fine.

This is what I don't understand because the page_available key is persistent is still there in the storage (no one deleted) the app should go on the second if and that the alert ... but this is not happening.

Answer 1

The very first time when the application is started the followings thinks happen:

1. App set openpages key with Date.now() value.
2. Because of 1. storage event listener start onLocalStorageEvent event.
3. Because the openpages key exists, is setting page_available key with Date.now ()
4. When the followings apps are started they find page_available key in storage (the second if) the alert is triggered and I can redirect them to an error page.

The entire idea here is to communicate between the tabs using the storage event that is being triggered every time you access localStorage.

So when the page loads it first access the openpages key to trigger the storage event with e.key == "openpages".

Only after that it registers the event listener. So 2 only happens when you load the page on a second tab. On the second tab the event is triggered and the event listener is registered. Because the storage event is triggered for all the tabs, the event listener of the first tab (which is already registered) is being executed.

Tab 1 is triggered by the storage event with e.key == "openpages" and gets into the first if. There it triggers the storage event by accessing page_available key.

At this point tab 2 event listener reacts to the storage event but this time with e.key == "page_available" and gets into the second if where it shows the alert.

Note that if you don't close the tabs and open more tabs, tab 3 will trigger the storage event for all other tabs and you will have multiple tabs with alerts.

---

Just for reference:

If you want to trigger the alert on the first tab and not the second one you can achieve it with this code:

// Broadcast that you're opening the page.
localStorage.openpage = Date.now();

var onLocalStorageEvent = function(e) {
  if (e.key == "openpage") {
    alert("One more page already open");
  }
};
window.addEventListener('storage', onLocalStorageEvent);

---

Read more about localStorage here.
Read more about addEventListener here.

Answer 2

After a restart of the browser window everything still works fine, and I don't understand why because the page_available key is still there in the storage

This is because localStorage has no expiration date which is opposite of sessionStorage. sessionStorage gets cleared once the browser is closed, but localStorage still remains.

You can still clear the localStorage by clearing the browser cache & cookies

Also this snippet localStorage.openpages = Date.now(); seems to be incorrect.

If you want to set a value in localStorage, do like this

localStorage.setItem('openpages',Date.now());