What is the best way to share data between open tabs in a browser?
If the first tab opens the second tab automagically, you can do something like this:
//open the first tab var child_window = window.open( ...params... );
// get reference to first tab var parent_window = window.opener;
Then, you can call functions and do all sorts of stuff between tabs:
// copy var from child window var var_from_child = child_window.some_var; // call function in child window child_window.do_something( 'with', 'these', 'params' ) // copy var from parent window var var_from_parent = parent_window.some_var; // call function in child window parent_window.do_something( 'with', 'these', 'params' )
In my opinion there are two good methods. One may suit you better depending on what you need.
If any of these are true...
If any of these are true...
-> Then use Comet (long-held HTTP request allows a web server to basically push data to a browser) for receiving data. And short POST requests to send data.
Etherpad and Facebook Chat currently use the Comet technique.
 When using localStorage more data can be stored obviously, but since you'd fallback on cookies one can't rely on this yet. Unless you application is for modern browsers only in which case this is just fine.
 Complicated data can be stored in cookies as well (JSON encoded), but this is not very clean (and needs fallback methods for browsers without JSON.stringify/JSON.parse) and can fail in scenarios involving concurrency. It's not possible to update one property of a JSON cookie value. You have to parse it, change one property and overwrite the value. This means another edit could be undone theoretically. Again, when using localStorage this is less of a problem.
The only way I can think of: constant ajax communication with the server to report any user action on the other tabs.
How about to use a cookie to store data in one tab and poll it in another tab? i dont know yet if a cookie is shared between tabs but just an idea now ...
I just took a look at how Facebook Chat does it and they keep a request to the server open for a little less then a minute. If data comes back to the server, the server then sends back the message to each open request. If no data comes back in a minute, it re-requests and continues to do this (for how long, I am not sure).
Given that these tabs are open with the same site in them, you might consider building an ajax script that reports user actions to server and couple it with another ajax script that reads that reports and reflects them in current window.
You could use AJAX (as everyone else is suggesting) or cookies if the data is small. See http://www.quirksmode.org/js/cookies.html for fun with cookies.
One way to do this is to not let the chat window be dependent on the tabs. Load the tabs as seperate AJAX components that when reloads doesn't affect the chat component.
If you already have two tabs open, changing something in one will not change the other unless you use some AJAX.
For a more modern solution check out https://stackoverflow.com/a/12514384/270274
I'm sticking to the shared local data solution mentioned in the question using
localStorage. It seems to be the best solution in terms of reliability, efficiency, and browser compatibility.
localStorageis implemented in all modern browsers.
storageevent fires when other tabs makes changes to
localStorage. This is quite handy for communication purposes.
©2020 All rights reserved.