Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why does the `storage` event exist for `sessionStorage` if it doesn't propagate across tabs?

MDN Web Docs says that

"The storage event of the Window interface fires when a storage area (localStorage or sessionStorage) has been modified in the context of another document."

However

  • sessionStorage data is shared only within one tab, and cannot be accessed from any other tab
  • storage events are only fired in other tabs or windows that share the same origin (domain), not in the tab where the storage change occurred.

So if we change some data in Tab1 sessionStorage, event should fire in Tab2, Tab3, etc. but at the same time, the data from sessionStorage should only be accessible within Tab1, which is confisuing for me.

I tested this behavior with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Storage Event Test</title>
  <script>
    function setSessionStorage() {
      sessionStorage.setItem('sessionKey', 'sessionValue');
      console.log('sessionStorage set:', sessionStorage.getItem('sessionKey'));
    }

    function setLocalStorage() {
      localStorage.setItem('localKey', 'localValue');
      console.log('localStorage set:', localStorage.getItem('localKey'));
    }

    window.addEventListener('storage', (event) => {
      console.log('Storage event detected!');
      console.log('Key:', event.key);
      console.log('Old Value:', event.oldValue);
      console.log('New Value:', event.newValue);
      console.log('Storage Area:', event.storageArea);
    });
  </script>
</head>
<body>
  <h1>Test Storage Event</h1>
  <button onclick="setSessionStorage()">Set sessionStorage</button>
  <button onclick="setLocalStorage()">Set localStorage</button>
</body>
</html>

I opened this page in two tabs, and when I changed sessionStorage on Tab1, Tab2 didn’t detect storage event (unlike withlocalStorage).

So, my question is: Why does storage event for sessionStorage exists, if it’s not accessible from anywhere?

Tags:

2

Answers


  1. 0

    It’s possible to have multiple documents in a single tab using an iframe, in which case the event is accessible.

    index.html

    <!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <script>
            window.addEventListener('storage', e => {
                console.log(e);
            });
        </script>
    </head>
    <body>
        <iframe src="frame.html"></iframe>
    </body>
</html>

    frame.html

    <!DOCTYPE html>
<html>
    <head>
        <title>frame</title>
    </head>
    <body>
        <script>
            sessionStorage.setItem('test', Date.now());
        </script>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    The storage event is still useful for sessionStorage within the same tab for some uses. For example:

    If a webpage has more than one iframe in the same tab and has the same sessionStorage, if one iframe may change the value of the sessionStorage, other iframes in the same tab can be notified to do something.

    In other words, a storage event for sessionStorage is there when multiples of the same document would share the same sessionStorage for one tab and not for cross-tab communication.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search