Add hook for storage event

[aensley]

Would it be possible to add a way to hook into the HTML5 storage event with this library?

Demo of the functionality I'm looking for (but doesn't use store.js, obviously).

I'm thinking something like:

// All Windows / Tabs:
store.on('keyName', function(s){
    console.log(s.newValue);
});

// Window / Tab 1:
store.set('keyName', 'testValue');

// All other Windows / Tabs:
// 'testValue' is logged.

I'm implementing my own solution for this with the following code:

// All Windows / Tabs:
// Hook into the storage event
$(window).on('storage', function(e){
    // Keys we actually care about.
    var keys = ['timeStamp', 'key', 'oldValue', 'newValue', 'url'], newEvent = {};
    e = e.originalEvent; // jQuery puts the original event here
    for (var i in keys) {
        i = keys[i];
        if (i.substr(3) === 'Value') {
            // Get the value back just like we put it into store.set()
            newEvent[i] = store.deserialize(e[i]);
        } else {
            newEvent[i] = e[i];
        }
    }

    // Send the event to global listeners that want to know about all storage changes.
    newEvent.type = 'localStorage';
    $(document).trigger(newEvent);
    // Send the event to listeners for this key only.
    newEvent.type = newEvent.key + '.localStorage';
    $(document).trigger(newEvent);
});

$(document).on('keyName.localStorage', function(e){console.log(e.newValue);});

// Window / Tab 1:
store.set('keyName', 'testValue');

// All other Windows / Tabs:
// 'testValue' is logged.

This seems like the perfect addition to this library. It would make cross-window/tab communication with store.js dead-simple. Want all of your web app tabs to know you just got a new message in the current tab? Just call store.set('newMessage', 'hey!');.

Of course, it would only work when localStorage is supported, but it would be easy enough to indicate in the .on() function's return value whether or not listening is enabled.

I can submit a pull request if you're interested.

[nbubna]

FYI, store2 has an extension for storage events that you'd probably like. http://github.com/nbubna/store

It uses store.bind(key, fn) instead of store.on(key, fn), though as it is alpha, i'm open to changing the interface. It also does some normalization of storage events.

[aensley]

Thanks. I had no idea that library existed.

[nbubna]

Yeah, i kept it to myself until a few months ago. The store.bind.js extension was one i had high hopes for but was stymied by browser incompatibilities. Now that we're looking at dropping IE.old entirely for ESHA apps, i may be revisiting it. So, i'm VERY interested in any feedback you've got.

[aensley]

When the store.bind.js file says this:

Status: ALPHA - useful, but browser support is inconsistent

Does it just mean that browser support for the storage event is inconsistent? If so, that's already a known limitation that I can live with.

[nbubna]

Yes, that's a reference to browser support.

[aensley]

Ok, so I'm using store2.js now, and it works perfectly as a drop-in replacement for store.js. Now I'm trying to figure out store.bind(). I'm having a little trouble figuring out exactly how to use it. Is there some documentation for it somewhere?

[aensley]

Nevermind. I think I figured it out. I just submitted a pull request to add an unbind() method. We should probably continue our conversation there so we're not cluttering up this repository.

nbubna/store#7

[marcuswestin]

Store.js v2.0 has been released with support for storage events and storage value observations: https://github.com/marcuswestin/store.js#user-content-list-of-all-plugins

If you update you will get this functionality plus a bunch more :)