Javascript: sharing data between tabs

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


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

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.

Tags:

Javascript

Recent Posts