在另一个窗口中使用localstorage检查

问题描述

我正在尝试制作一个基本的webapp。这基本上是一个难题，随着时间的推移，当你找到某些链接或URL。

这个谜题有8个部分，当您访问某个哈希时会出现。哈希是使用backbone.js设置的，并且它们每个都会触发一个显示与之相对应的片段的函数。

哈希值是这样的 - index.html＃hide / one，index.html＃hide / two，直到index.html＃hide / 8。

每次触发散列时，它都会显示一段使用JavaScript函数的简单代码，该函数只是为元素添加一个类。很简单吧？

问题是，散列在另一个窗口中打开。主窗口只是index.html＃hide。因此，我需要为每件作品创建一个本地存储值，不断在主页上检查它，如果它设置为是，则执行一个函数。

这可能吗？如果是这样，我该怎么做呢？

在此先感谢，

-Mitchyl

p>

编辑 - 如果任何人感兴趣，以下是源代码。我不太清楚什么是相关的，哪些不是，所以这是整个代码。

解决方案

不是从主窗口轮询LocalStorage，而是使用窗口之间的某种直接通信。\\ b
$ b

如果所有的窗口是相同的起源（相同的协议，域和端口），一个窗口打开其他窗口，只要保存窗口句柄，就可以直接从一个窗口调用JS功能。对于主窗口打开的窗口，主窗口将位于 window.opener 中，因此您可以在主窗口中调用全局定义的函数，如：

  window.opener.updatePuzzle（data）; 
  

---

您也可以使用 window.postMessage（）可以在窗口之间交换数据，表面上看起来更干净一点，而且对同一个来源没有限制（因为它需要两个合作窗口），但是 postMessage（）在IE11之前仍然很难依靠（感谢IE）。

---

如果您的主窗口没有以任何方式打开其他窗口（例如，用户只是键入了其他URL），则您的窗口无法直接在浏览器中彼此通信。在这种情况下，他们要么通过服务器交换数据，要么通过LocalStorage轮询数据。

以下是一个非常好的LocalStorage教程： http://www.sitepoint.com/an-overview-of-the-web / b>

 <$ c 
 $ c> localStorage.setItem（hash4，true）; 
  

从另一个窗口：

<$ p $ （var i = 0; i< maxHash; i ++）{
var val = localStorage .getItem（hash+ i）
if（val）{
//散列值i被发现为真
}
}
}，1000） ;

听起来您在移动设备上这样做，您应该知道轮询连续不理想在移动中出于一系列原因。首先，当它允许运行时，它会消耗电池电量。第二，移动设备可能不会让它连续运行（因为它会试图保存电池）。

---

您也可能会更复杂一些，关于如何存储而不是使用N个单独的键，您可以将JSON存储在一个表示包含一个LocalStorage键中的所有值的对象的键中。

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

解决方案

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.

这篇关于在另一个窗口中使用localstorage检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！