Love the approach, I didn't know about the StorageEvent, so I dived in (maybe to deep).
Looking into it, it seems this is exactly the intended use of the StorageEvent (developer.mozilla.org/en-US/docs/Web/API/Window/s… "it is really a way for other pages on the domain using the storage to sync any changes that are made").
--
A peculiar thing is this only works for the localStorage, even though it should work for both local and session (html.spec.whatwg.org/multipage/indices.html).
The reason for this seems to be a catch-22, looking at the rules for the event: html.spec.whatwg.org/multipage/webstorage.html "Dispatches a storage event on Window objects holding an equivalent Storage object". meaning it only fires on other windows (tabs), and not the instance making the changes.
The sessionStorage has a different instance for each open window (html.spec.whatwg.org/multipage/webstorage.html "If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.").
So even if the event is fired on the sessionStorage, that exact instance isn't available in any other window, so there's no instance to dispatch to. I have not looked into any actual implementation here, so I don't know exactly what happens behind the curtain.
--
Sorry for hijacking the comments, I just found it funny reading through the specs, and thought maybe others would appreciate the trivia.
Thanks for a great post!