Using localstorage checks in a different window

Question

I'm trying to make a basic webapp. It's basically a puzzle that appears over time, when you find certain links or URLs.

The puzzle has 8 pieces, and they appear when you visit a certain hash. The hashes are setup using backbone.js, and they each trigger a function that shows the piece that corresponds with it.

The hashes go like this - "index.html#hide/one", "index.html#hide/two", up to "index.html#hide/eight".

Every time a hash is triggered, it shows a piece using a JavaScript function that simply adds a class to the element. Easy enough, right?

The problem is, the hashes open in a different window. The main window is just "index.html#hide". So I need to create a localstorage value for each piece, constantly check it on the main page, and if it's set to "yes", execute a function.

Is this possible? And if so, how could I go about doing it?

Thanks in advance,

-Mitchyl

Edit - Here's the source code if anyone's interested. I'm not quite sure what's relevant and what's not, so here's the code in it's entirety. http://pastebin.com/Q4hpJtQ8

You could also use [`window.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to send messages between the windows and avoid having to poll LocalStorage. — jfriend00, Aug 18 '14 at 18:02
So I could do `window.postMessage()` and do a `if` statement for the URL. If the URL = "index.html#hide/one", perform a certain function on the main page? — , Aug 18 '14 at 18:05
Yes, you could do it that way. I just looked into `.postMessage()` browser support for multiple windows and it looks like IE10 has partial support, IE9 only supports it in frames and IE11 has full support. Other browsers support it. — jfriend00, Aug 18 '14 at 18:07
Also, if all your windows are the same origin (same domain, protocol, port, etc... but path/filename can be different), then you can also directly call JS functions between windows if you have the window handle which you can save when you open the windows. — jfriend00, Aug 18 '14 at 18:09
I'm not sure if `.postMessage()` can send functions cross-window though. So you're saying that I could do `.postMessage(function)` and have it execute on a different window using `.recieveMessage()`? — , Aug 18 '14 at 18:21

jfriend00 · Accepted Answer · 2014-08-18T18:32:18.747

Rather than polling LocalStorage from the main window, it's probably better to use some sort of direct communication between the windows.

If all your windows are the same origin (same protocol, domain and port) and one window opens the others, then you can directly call JS functions from one window to another as long as you save the window handle. For windows that your main window opened, the main window will be in window.opener so you could just call a globally defined function in the main window like:

window.opener.updatePuzzle(data);

You can also use window.postMessage() to exchange data between windows which seems (on the surface) a bit cleaner and isn't as restrictive about same origin (because it requires two cooperating windows), but there are limitations with postMessage() in IE before IE11 which still make it difficult to rely on (thanks IE).

If your main window did not open the other windows in any way (e.g. the user just typed the other URLs), then your windows cannot directly communicate with one another within the browser. In that case, they'd either have to exchange data via a server or poll for data via LocalStorage.

Here's a pretty good tutorial on LocalStorage: http://www.sitepoint.com/an-overview-of-the-web-storage-api/:

From one window:

 localStorage.setItem("hash4", true);

From the other window:

 setInterval(function() {
     var maxHash = 5;
     for (var i = 0; i < maxHash; i++) {
         var val = localStorage.getItem("hash" + i)
         if (val) {
             // hash value i was found to be true
         }
     }
 }, 1000);

As it sounds like you're doing this on mobile, you should know that polling continuously is not ideal on mobile for a bunch of reasons. First off, it's a battery drain when it's allowed to run. Second off, the mobile device will probably not let it run continuously (as it tries to save your battery).

You could also be a bit more sophisticated about how you store and rather than use N separate keys, you could store JSON in one key that represented an object that contained all the values in one LocalStorage key.

The main window doesn't open the other windows. They're randomly generated on real-life cards(it's a game of sorts). I'm not sure if `window.postMessage()` can send JavaScript functions to a different page — , Aug 18 '14 at 18:23
They're manually accessed by the user. They're programmed onto NFC(near field communication) cards, and when a user taps them it takes them to a URL. Basically I just need to know the function used to store data in localstorage. Then I need to know how to constantly poll localstorage from the main window, and execute functions based on the values returned. — , Aug 18 '14 at 18:26
Thanks for the edit. So what that will do is set the "hash4" item from the opened window to true, then it will poll for that value every 1000ms(?) checking for it. Then in the spot that you wrote commented code, I just put in my function to hide/show the piece? Alright. — , Aug 18 '14 at 18:34

Using localstorage checks in a different window

1 Answers1

Linked