46

What is the best way to share data between open tabs in a browser?

alexey
  • 8,058
  • 11
  • 61
  • 99

10 Answers10

45

For a more modern solution check out https://stackoverflow.com/a/12514384/270274

Quote:

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.

localStorage is implemented in all modern browsers.

The storage event fires when other tabs makes changes to localStorage. This is quite handy for communication purposes.

Reference:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

Community
  • 1
  • 1
brillout
  • 8,117
  • 9
  • 60
  • 74
  • For scope of key stored in [localStorage vs sessionStorage](https://stackoverflow.com/a/9784994/465053) – RBT Oct 25 '17 at 02:12
  • You will have issues with browsers such as Edge, which in private mode do not share local storage between tabs. – João Paiva Jan 30 '19 at 15:34
  • There are several other ways to [share data between tabs](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows): you can also use `postMessage` or `BroadcastChannel`. – Anderson Green Jan 20 '21 at 18:24
17

If the first tab opens the second tab automagically, you can do something like this:

First tab:

//open the first tab
var child_window = window.open( ...params... );

Second tab:

// 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' )
Stephen Sorensen
  • 9,969
  • 11
  • 29
  • 42
  • I don't think this will work in situations where the user opens a page in a separate tab on their own. – Justin Johnson Sep 02 '09 at 18:37
  • But in situations where the child window is only opened by clicking a button in the parent and made full-screen on a second monitor while the parent controls it... should work a charm. – Patrick Aug 30 '19 at 20:02
4

See also another StackOverflow thread: Javascript communication between browser tabs/windows.

In my opinion there are two good methods. One may suit you better depending on what you need.

If any of these are true...

  • you can't store information server side,
  • you can't make many http requests,
  • you want to store only a little bit of information[1],
  • you want to be pure javascript / client side,
  • you only need it to work between tabs/windows in the same browser.

-> Then use cookies (setCookie for sending, getCookie/setTimeout for receiving). A good library that does this is http://theprivateland.com/bncconnector/index.htm

If any of these are true...

  • you want to store information server side
  • you want to store a lot of information or store it in a related matter (i.e. tables or multi-dimensional arrays[2])
  • you also need it to across different browsers (not just between tabs/windows in the same browser) or even different computers/users.

-> 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.

[1] 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.

[2] 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.

Timo Tijhof
  • 9,597
  • 6
  • 31
  • 45
2

The only way I can think of: constant ajax communication with the server to report any user action on the other tabs.

Alsciende
  • 24,883
  • 8
  • 46
  • 66
2

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 ...

Chris
  • 14,451
  • 18
  • 70
  • 73
  • 1
    Yes cookies are only bound to domains, therefore shared between tabs. However one must poll the cookie continuously, you can not listen to cookie changes. – sibidiba Feb 15 '11 at 13:41
2

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).

Brian
  • 37
  • 1
  • Yep, this method is known as "Comet". From the client side it's no different than simple AJAX polling (e.g. make an AJAX request, process the response and make another request). However the serverside is atypical compared to traditional AJAX. The server will not return right away after it done it's task. Instead it will keep that (for example PHP request) open and do a while()-like loop until there is new information (or when the timeout, i.e. 50 seconds is exceeded). Read more: http://en.wikipedia.org/wiki/Comet_(programming%29 . It is not real push technology, but as close as possible. – Timo Tijhof Nov 22 '11 at 18:19
  • 2
    Why not just use sockets? – Andrew Rhyne Jan 21 '13 at 22:02
  • 3
    This doesn't come close to answering the question. Why was it accepted? The question was how to communicate between browser tabs; not between server and browser. – Andrew Ensley Jun 20 '13 at 14:57
  • 1
    Andrew they can communicate via the server. I.e. one tab sends a message, Comet response is received by other tab(s). There is no direct way for two tabs to communicate. Shared local storage and cookies as per other responses an option too. – Dodgyrabbit Aug 01 '13 at 19:46
  • 1
    @Dodgyrabbit - *cough* http://caniuse.com/x-doc-messaging :) – broofa Sep 03 '13 at 21:37
1

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.

n1313
  • 18,981
  • 7
  • 27
  • 45
  • you mean make an ajax call to the server to check is something has changed every less than a second? that's not the way.. – vsync Apr 05 '11 at 12:05
  • If you need things to happen live, this would indeed require making a ton of requests all the time. However this can be solved by making the server hold the request for a longer period of time until there is data (or until the timeout is exceeded). See also [Comet (wikipedia)](http://en.wikipedia.org/wiki/Comet_(programming%29) and my answer. This is also how EtherPad and Facebook Chat works. – Timo Tijhof Nov 22 '11 at 18:37
1

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.

Justin Johnson
  • 29,495
  • 7
  • 60
  • 86
0

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.

Randell
  • 5,856
  • 5
  • 42
  • 69
0

Depending on the requirements you can also use cookies/sessions. However, this means the data will only be accessible on the first page load of each tab.

If you already have two tabs open, changing something in one will not change the other unless you use some AJAX.

DisgruntledGoat
  • 62,693
  • 62
  • 192
  • 281