Search code examples
javascripthtmlbackbone.jshashlocal-storage

Using localstorage checks in a different window

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

Solution

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