I'm trying to constantly watch for change in sessionStorage value and performing a console.log if the sessionValue is not null

  let intervalId = setInterval(function () {   
     if (sessionStorage.getItem('Data') !== null) {
            console.log('Success');
            clearInterval(intervalId);
        }
    }, 500);

The issue is I feel using a setInterval approach is not that good. What else can be done instead of using a setInterval. Can ES6 proxy implement a watcher.

I'm trying to constantly watch for change in sessionStorage value and performing a console.log if the sessionValue is not null

  let intervalId = setInterval(function () {   
     if (sessionStorage.getItem('Data') !== null) {
            console.log('Success');
            clearInterval(intervalId);
        }
    }, 500);

The issue is I feel using a setInterval approach is not that good. What else can be done instead of using a setInterval. Can ES6 proxy implement a watcher.

• javascript
• ecmascript-6

• Why not writing a wrapper around local storage access and hook some actions on get/set? – lukaleli Commented Sep 18, 2017 at 20:20
• Is the change to the sessionStorage made by you or from an external script? – marpme Commented Sep 18, 2017 at 20:26
• @kyon It is external – JabhimanyuS Commented Sep 18, 2017 at 20:29

2 Answers 2

Polling in JS is a sign of a misunderstanding. In JS you want to write your code such that you will be told when something changes, rather than writing code to check if it has changed.

In this case, changes to session storage emit a storage event on the window: https://developer.mozilla/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Responding_to_storage_changes_with_the_StorageEvent

So you can do

window.addEventListener('storage', function(e) {
  if (e.storageArea === sessionStorage && e.key === 'Data') {
    // Something on another page changed the stored value.
  }
});

You can look at the docs for information about what properties exist on e: https://developer.mozilla/en-US/docs/Web/API/StorageEvent

Note that this event only fires if another page changes the stored value. If it is your own application that is making the changes, it would be up to you to write your code such that you can notify other pieces of code when changes happen. You could for instance write an object that you'd use everywhere in your own code that you could attach callbacks to, to act as an intermediate.

Why not writing a wrapper around sessionStorage access and hook some actions on get/set?

function makeSSPersistence(callback) {
  return {
    setItem: function(key, value) {
      window.sessionStorage.setItem(key, value)
      callback()
    },
    removeItem: function(key) {
      window.sessionStorage.removeItem(key)
      callback()
    },
    getItem: function(key) {
      return window.sessionStorage.getItem(key)
    }
  }
}

function checkCallback() {
  if (sessionStorage.getItem('Data') !== null) {
    console.log('Success')
  }
}

var ss = makeSSPersistence(checkCallback)

ss.setItem('Test', 12345)
ss.setItem('Data', 12312412)
ss.removeItem('Data')

Also you can set listener on window object and listen for storage event which notifies you if some operation was made on the storage.