How do I run a function once session storage is != undefined

Question

I am in a situation wherein I have a an external JavaScript file that makes an ajax call and saves certain data to session storage. The JavaScript file loads from an external site and therefore, I cannot edit it.

I need to run a function to consume the saved data as soon as it loads into session storage. How can I trigger a function once this data loads?

possible duplicate of [this](https://stackoverflow.com/questions/10260108/how-do-i-bind-event-to-sessionstorage) — Sampgun, Jun 29 '17 at 16:23
Possible duplicate of [How do I bind event to sessionStorage?](https://stackoverflow.com/questions/10260108/how-do-i-bind-event-to-sessionstorage) — Sinan Ünür, Jun 29 '17 at 16:28

aabilio · Accepted Answer · 2017-06-30T08:01:12.497

Maybe this can help you:

window.onstorage = function(e) {
  console.log('The ' + e.key + ' key has been changed from ' + e.oldValue + ' to ' + e.newValue + '.');
};

More info here and here

So you could subscribe to your session key changes with (not tested):

window.onstorage = function(e) {
    if ( 
        e.storageArea === sessionStorage && 
        e.key === "<your_key>" && 
        e.oldValue === undefined &&
        e.newValue !== undefined
    ) {
        console.log("my key is not undefined anymore")
    } 
};

UPDATE: So it seems that it is not working for you. Then you can try something like this (using interval to check if sessionStorage changes):

var INTERVAL = 2000;
// Then, in your code you can check every `INTERVAL` milleconds
// if the sessionKey you need is not null
console.log("Program starts");
// You can limit your intents too
var limit = 5;
var intervalId = setInterval(function() {
  console.log("Checking sessionStorage");
  var test = sessionStorage.getItem("test");
  if (test !== null) {
    console.log("'test' is now defined: " + test);
    clearInterval(intervalId);
  }

  if (--limit <= 0) {
    console.log("'test' has not changed");
    clearInterval(intervalId);
  }
}, INTERVAL);

Test here: https://jsbin.com/tukubutoje/edit?js,console

This doesn't seem to fire for session storage, it works perfectly with local storage --- any other suggestions that would work with session storage? — Dhruv, Jun 29 '17 at 17:47

Sinan Ünür · Answer 2 · 2017-06-29T16:27:44.127

See StorageEvent:

A StorageEvent is sent to a window when a storage area it has access to is changed within the context of another document.

For example:

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = e.storageArea;
});
Here we add an event listener to the window object that fires when the Storage object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

This doesn't seem to fire for session storage, it works perfectly with local storage --- any other suggestions that would work with session storage? — Dhruv, Jun 29 '17 at 17:47

How do I run a function once session storage is != undefined

2 Answers2