Friday, September 3, 2010

localStorage === inter window communication ?

You maybe already heard about the HTML5 localStorage object. That is cool stuff indeed, since it allows us to store data locally (you think..?), in a very easy and robust manner.

But that is not the point of this post, another cool thing about the localStorage is, that the browser will fire a storage event, each time you add or remove data. This event is fired in all open windows / tabs which share the same domain.

That in turn means, you can think about it like IPC?..no, IWC! (Inter-Window-Communication). Using jQuery, we can listen like this:

$(window).bind('storage', function(e){
 alert(localStorage.newmsg);
});

We now can open a new window or tab and call:


localStorage.newmsg = 'I am a shared message!';

Suddenly, as if by magic, in our first window/tab an alert message appears. This concept
already works in all browser that support HTML5 localStorage. It would be even more nice
to know which key was written, what the old value was, what the new value is, etc.
So let's have a look at the W3C draft for the storage event object:

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute any oldValue;
  readonly attribute any newValue;
  readonly attribute DOMString url;
  readonly attribute Storage storageArea;
  void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in any oldValueArg, in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);
};

Looks like we got everything we need? Well, at this point I have to disappoint you. This part from the draft is implemented pretty poorly. Infact, Firefox 3.6.8 does not implement even one from the above event propertys. Chrome at least, supports the "newValue" property, but that doesn't really help alot. I didn't check Safari and IE8+9 so far. Anyways, as I already mentioned, the concept already works. But you have to put any kind of logic within the stored object to process messages properly.

I can think of some usecases here. You could synchronously update messages (read/unread) in a web email client for instance or do synchronous UI updates without the need to invoke a server!
On the other hand, I can also think of a downside. Since the localStorage will store data on your harddisk, this mechanism could cause (on heavy operations) some rumble on your disk. I didn't test that hefty so far.

Anyway, the localStorage "storage" event might open a nice pure clientside way to communicate between windows and tabs, what do you think?

1 comment: