Question

我在一个带有工作区的webapp上工作，用户可以在其中创建，加载和编辑文档。该工作区由几个区域构成，每个区域负责一部分工作。在工作空间中加载的一组文档称为＆＃34;项目＆＃34;并存储在＆＃34;项目＆＃34;集合。

项目涉及的数据有两种类型：

附加到项目的文档集。它存储在＆＃34;项目＆＃34;中的mongo文档中。集合
特定用户正在处理的当前文档。我还没有存储它，我只是使用一组全局反应变量来加载文档和用户点击它时附加的信息。这意味着每次用户访问工作区/项目时，他都不会找到以前加载的文档，但根本没有加载文档。

我现在想要存储具有一个主要要求的第二类数据：允许用户以＆＃34;扩展模式工作＆＃34;其中一个面板位于专用浏览器窗口（据称在另一个屏幕上）。这意味着如果他在窗口中单击文档，则文档将加载到另一个窗口/屏幕中。

据我所知，我无法直接从一个浏览器窗口向另一个浏览器窗口发送信息。我必须使用服务器来传递信息。因此，用户点击文档＆gt;新加载的文档ID被发送到服务器＆gt;另一个窗口相应更新。

我的假设是否正确？（服务器必须转发信息）

为了实现这个功能，我想出了几个解决方案：

我附上一个＆＃34;项目＆＃34;字段到用户配置文件mongo文件。在每个字段中，我将为每个项目加载最后一个项目，我将使用此字段从另一个屏幕更新一个屏幕。
我在每个项目文档中创建一个特定字段，对于每个处理项目的用户，我存储当前加载的文档及其设置。

第一个选项是假设将每个项目信息与用户配置文件一起加载（即在每个页面中），并且可能导致发送多次无用的信息。

每次用户为连接到项目的每个用户加载项目（而不是实际修改项目）时，第二个选项将触发流星反应机制。

每个选项都有严重缺点，我想知道哪一个对您更好，如果您能想到其他选择。

Answer 1

你应该能够使用其中一个reactive local storage packages用于流星，特别是如果你不担心不支持非HTML5浏览器......不能给出一个没有支持非HTML5浏览器的大量指导他们使用了大部分内容，但HTML5本地存储可以在选项卡中使用，并且似乎是一个存储数据的好地方，无需往返服务器，同时也允许它在选项卡之间保留。

您还可以通过向应用添加监听器来实现本地存储setitem()和removeItem()事件，从而推广您自己的实现（可能比尝试查找完全符合您需求的软件包更简单）这个helpful guide从下面的代码被无耻地复制了......

if (window.addEventListener) {
  // Normal browsers
  window.addEventListener("storage", handler, false);
} else {
  // for IE (why make your life more difficult)
  window.attachEvent("onstorage", handler);
};

function handler(e) {
  console.log('Successfully communicate with other tab');
  console.log('Received data: ' + localStorage.getItem('data'));
  //Add in your code to display the document on the second tab
}

localStorage.setItem('data', 'hello world');

我应该如何设计多屏幕功能？

1 个答案: