Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

There are a few new HTML5 features that have made it into recent browsers that allow sharing state among tabs, browser windows, same domain windows, etc. So it's probably gotten a little easier to write a web application that keeps a lot of state on the client and also manages state intelligently between tabs and/or windows.

There are currently libraries like Backbone.js that can help manage state in a single tab or a single window. Is there anything out there yet that helps with multiple tabs (or windows) managing global state, tab specific state, and cross-tab eventing without relying on the server to sync them all up?

share|improve this question

closed as off-topic by GlenH7, Bart van Ingen Schenau, Kilian Foth, MichaelT, Dan Pichelman Jan 12 at 17:39

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – GlenH7, Bart van Ingen Schenau, Kilian Foth, MichaelT, Dan Pichelman
If this question can be reworded to fit the rules in the help center, please edit the question.

2  
Some web apps (e.g. Trello) are bypassing this by just using WebSockets to sync up all clients, whether in the same browser or not. But it could be useful. If I was writing a library like this, I'd make a thin layer over a polyfill for SharedWorkers, as SharedWorkers does a lot of what you need here, but isn't yet well supported. A hack to get this working is localStorage events, which fire even when the tabs were opened independently. –  mahemoff Feb 23 '12 at 13:07
1  
My college teacher taught me that HTTP is great (and beutiful) because it is stateless. Ever since i joined industry, i am in search of that beuty but cann't quite find it. Everyone talks only about keeping the states you see! –  Dipan Mehta Mar 4 '12 at 5:04
    
@DipanMehta: if you look at the RFC2616, I'm not sure you'd agree with your teacher about the "beauty" part :) Though I'd give you that the "purely stateless" idea is indeed great and I find problematic that we're butchering it... –  haylem Mar 4 '12 at 7:45
    
Stateless and web application don't go that well together. Little things like being logged in carry state. Great if you're just serving fairly small files to anyone who asks for them I guess. –  psr Mar 5 '12 at 17:20
    
I wrote a tiny library to communicate between all the open tabs of your website using an HTML5 trick. –  kuchumovn Mar 28 '13 at 19:23

3 Answers 3

up vote 2 down vote accepted

Short answer:

You cannot truly pass state information from one tab to another...

Long answer:

You cannot truly pass state information from one tab to another, as this would be a very severe breach of sandboxing and security.

You can, however indirectly pass state between two tabs by way of:

Another option would to simply communicate via cookies to pass information between 2 tabs, but this would most likely cause issues, be highly browser-dependent and require page reloads (and to be honest I've never tried that one and just thought of it, but others have done it).

So, as browser extensions are obviously a fairly limiting path, you should go the way of client-server communications and develop a system to allow clients to publish events to a server, that then re-dispatches them (or any other kind of broadcast) to other clients via a communication protocol of your choice.


Update 1: As someone mentioned in a comment before removing it (cannot give credit as it doesn't show in the inbox, sorry)

HTML5 introduces the window.postMessage API.

For a working example, see John Resig's blog-post on Cross-Window Messaging. And very interestingly, if you look at the comments on this post you'll notice someone called Malte mentioning a library they wrote to use window.postMessage on modern browsers, or a cookie-based version on older browsers.

Read these for more details and examples:

Update 2:

Keep in mind that, as 2012-03-04, the HTML5 specification is still a draft, so some features could be removed. So use with care...

share|improve this answer
    
I am apparently wrong, as HTML5 introduces the window.postMessage API, indeed. –  haylem Mar 4 '12 at 7:22
    
Also, if you read John Resig's blog-post on Cross-Window Messaging and the comments, you'll notice someone called Malte mentioning a [library][3] they wrote to use this on modern browsers, or a cookie-based version for older browsers, so my cookie thing wasn't that crazy. –  haylem Mar 4 '12 at 7:22

I recently discovered Intercom, which uses local storage to implement broadcast messaging between windows. Local storage fires an event (onstorage) when data changes, so no polling is necessary. Intercom allows all pages on a domain to communicate, regardless of how they were opened.

share|improve this answer

If your windows (pages) are from the same domain (origin), localStorage can be used to share data and to broadcast messages. One thing you should consider is that each browser window (page) works in a separate thread. So, if we are talking about cross-window communication, we are also talking about multithreading.

You should also consider some localStorage issues with IE:

  • I've performed some tests for localStorage in IE8. After several thousands of changes to localStorage, windows from the same origin stop receiving 'storage' events. Even more, then you try to read from the same localStorage item, values may be differrent in different windows. So, I'd say that IE8 doesn't support localStorage

  • IE9 and IE10 call 'storage' event handler even if localStorage is changed from this window (this is against specification).

  • There are also known issues with IE11.

I've recently published the interwindow communication library (all features are described in readme). It provides thread-safe data sharing, event broadcasting. It also solves some IE issues (IE8 definitely is not supported, IE11 bug with iframe inside different origin parent may be solved only by IE fixing - waiting for IE11 update).

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.