ob-session

ob-session is a form-associated web component that makes accessing SessionStorage declarative, and adds support for JSON objects. It can act as a "web component as a service" within a "web component organism".

It can also serve as a base class that can be given a semantic name on the fly, with the help of be-obsessed, that is actually used as the key for where to find the object:

<user-preferences be-obsessed onchange></user-preferences>

Because we are allowing pure HTML markup to do things that could have potentially nasty side effects, just in case, this component insists that the onchange attribute be present, in order to do anything. The choice of onchange isn't arbitrary. The component actually emits event "change" when the key it is monitoring for changes in value in sessionStorage. So we can in fact add code in the onchange event attribute that does something when that happens.

In good company

Websites that appear to store objects in session storage:

1. Twitter.com
2. Amazon.com
3. Walmart.com
4. CNN.com
5. WashingtonPost.com
6. TypescriptLang.org
7. WSJ.com

Why focus on Session Storage?

Whereas one could argue that local storage is being eclipsed by helper libraries based on Indexed DB, session storage serves a particular niche -- In some lines of business, caching business data in the client, even after the browser window / tab closes, runs afoul of audits. The navigation entries and sessionStorage don't appear to raise such concerns.

API

The api supports an init(win: Window) function, where you can pass in a window (say, from an iframe). init() is immediately called on the window that references the api.

Once init is called, just call setItem(key, stringOrJsonSerializableObject), getItem(key), removeItem(key) from the window object.

To listen for any updates to sessionStorage, use:

win.addEventListener('session-storage-item-set', e => {
    console.log(e.oldValue, e.newValue, e.key);
});
win.addEventListener('session-storage-item-removed', e => {
    console.log(e.oldValue, e.key);
});

where "win" is a local variable shortcut pointing to the (iframed) window object.

Viewing Your Element

$ npm install
$ npm run serve

Running Tests

WIP