Inter-window messaging using localStorage

http://bens.me.uk/2013/localstorage-inter-window-messaging

by bensummers • 13 years ago

103 28 13 years ago

bens.me.uk

Sephr• 13 years ago

This isn't abuse, it's what the storage event was specifically made for. Facebook, Google, etc. have been using this event to update common state information between tabs for quite a while.

bensummers5• 13 years ago

I am disappointed I did not have an original thought. Nothing is new in this world.

I propose we rename it the "Web Storage And Messaging" API.

8ig8• 13 years ago

Maybe you didn't invent the idea, but your post will likely introduce the concept to many folks. I believe this is equally valuable. Thanks.

eclipticplane• 13 years ago

Don't be disappointed! This is slick, and easy to understand. I don't really want to digest the javascript Facebook is using to learn a new tool/concept.

angersock2• 13 years ago

No worries. We all stand on the shoulders of giants. :)

agilebyte• 13 years ago

Yup. We use it in our Backbone.js app to allow users to open links in new tabs and for changes in those tabs to propagate back too.

For me it is awesome to use PushState and LocalStorage in a client side app and all the while the user thinks they are using a "traditional" server side app.

mr_k• 13 years ago

I learned something new today because of your post. Thanks

holloway• 13 years ago

Also you probably broke the law

http://www.google.com/patents/US7730419

http://www.google.com/patents/US7426699

(ok they're for cookies but you get the idea)

tiles• 13 years ago

If you want to use localStorage atomically, I found this writeup and code on a LockableStorage interface to be very thorough: http://balpha.de/2012/03/javascript-concurrency-and-locking-...

bensummers5• 13 years ago

That's rather cool. And nice to see a use of the Lamport algorithm in a browser. :-)

hobohacker2• 13 years ago

It depends on what you mean by atomic. Please refer to http://www.chromium.org/developers/design-documents/indexedd... where Chromium devs state: """ LocalStorage is inherently racy or a parallelism disaster, depending on whether or not you're willing to implement the "storage mutex" described in the spec. Chromium has decided not to implement it. WebKit itself is single thread/process (i.e. no parallelism period). """

Note that the way Chromium implements localStorage, it uses a disk backing store of sqlite, a caching layer (a std::map) in the browser process, and a caching layer (also a std::map) in the renderer processes (where WebKit runs, and may handle 1-X tabs per process). Changes are propagated via IPC, but as the API does not provide any locking guarantees beyond the optional storage mutex, which Chromium does not implement, there are obviously race conditions.

This probably explains the issues the author of that post encountered with Chrome.

khuey• 13 years ago

The storage mutex is still technically in the spec, but no browser is going to implement it.

btipling• 13 years ago

localStorage doesn't clear when the browser exits so it's a security issue in some cases. Look at sessionStorage instead in that case.

Benferhat• 13 years ago

sessionStorage won't work across tabs. You have to encrypt sensitive data; I use securecookie [0].

[0] http://godoc.org/github.com/gorilla/securecookie (Go)

bensummers5• 13 years ago

Yes, there are potential security issues with this, but as with anything in the browser you need to think through where your secrets are held. A similar issue comes with setting an expiry time of a few hours on a resource to let the browser cache it, so it's something web developers have been battling against for years.

angersock2• 13 years ago

Hmm....

Could you use sessionStorage to hold a temporary key for decrypting whatever is localStorage?

alxndr• 13 years ago

Great idea.

Doesn't seem to work in Chrome on iOS?

bensummers5• 13 years ago

http://caniuse.com/#search=localStorage needs another column.

I was intending this to be a "nice to have if it works", rather than essential to my app. But do people really use multiple tabs on a single site that much on mobile devices?

judofyr• 13 years ago

I thought the reason why Chrome on iOS doesn't implement the "full" incognito functionality was because they couldn't disable localStorage?

hobohacker2• 13 years ago

The primary caveat with this approach is race conditions due to lack of locking. Note the "Issues" section in http://www.w3.org/TR/webstorage/ which says:

""" The use of the storage mutex to avoid race conditions is currently considered by certain implementors to be too high a performance burden, to the point where allowing data corruption is considered preferable. Alternatives that do not require a user-agent-wide per-origin script lock are eagerly sought after. If reviewers have any suggestions, they are urged to send them to the addresses given in the previous section.

More details regarding this issue are available in these e-mails (as well as numerous others):

http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Sep... http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Dec... """

So as long as you don't need transactions/locks across the shared state, this might work. Of course, transactions/locks are often necessary.

atarian• 13 years ago

I was attempting to do something similar, but needed to support IE7 which doesn't support localStorage. You could probably rely on userData as a fallback though.

nmjenkins• 13 years ago

This technique does indeed work very well. I wrote about it last year, describing how we use it at FastMail to share a single push events connection between all open tabs: http://blog.fastmail.fm/2012/11/26/inter-tab-communication-u...

jdavid• 13 years ago

This method may allow message passing between tabs, and windows, but it does not do so between iFrames. Two iFrames on the tab will not trigger storage events on each other.

In my opinion this is a bug that should be fixed,

https://code.google.com/p/chromium/issues/detail?id=177342

STHayden• 13 years ago

As far as I can tell this does not work cross protocol from http to https. One of the thing I use postMessage for the most is messaging between those two protocols.

Inter-window messaging using localStorage

Related Stories