Inter-window messaging using localStorage(bens.me.uk)
bens.me.uk
Inter-window messaging using localStorage
http://bens.me.uk/2013/localstorage-inter-window-messaging
29 comments
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.
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.
I propose we rename it the "Web Storage And Messaging" API.
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.
TIL that you can do this. Awesome.
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.
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.
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.
Thank you. I was impressed with how few lines of code were needed to use the API, always a sign of a well-designed system.
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)
http://www.google.com/patents/US7730419
http://www.google.com/patents/US7426699
(ok they're for cookies but you get the idea)
I learned something new today because of your post. Thanks
No worries. We all stand on the shoulders of giants. :)
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.
""" 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.
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-...
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.
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.
The storage mutex is still technically in the spec, but no browser is going to implement it.
That's rather cool. And nice to see a use of the Lamport algorithm in a browser. :-)
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...
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
In my opinion this is a bug that should be fixed,
https://code.google.com/p/chromium/issues/detail?id=177342
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.
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.
localStorage doesn't clear when the browser exits so it's a security issue in some cases. Look at sessionStorage instead in that case.
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)
[0] http://godoc.org/github.com/gorilla/securecookie (Go)
Hmm....
Could you use sessionStorage to hold a temporary key for decrypting whatever is localStorage?
Could you use sessionStorage to hold a temporary key for decrypting whatever is localStorage?
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.
Great idea.
Doesn't seem to work in Chrome on iOS?
Doesn't seem to work in Chrome on iOS?
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?
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?
I thought the reason why Chrome on iOS doesn't implement the "full" incognito functionality was because they couldn't disable localStorage?