如何在 localStorage 中维护浏览器 Tab 对象？答案

【问题标题】：How to maintain browser Tab object in localStorage?如何在 localStorage 中维护浏览器 Tab 对象？
【发布时间】：2018-04-11 08:53:22
【问题描述】：

我正在开发一个 Web 应用程序。

在那，我需要在不同的浏览器选项卡中从主页打开多个页面，如果主页关闭，则所有其他打开的浏览器选项卡需要关闭或单击Close Tab 按钮。

我通过使用Array 来完成此操作，但是当主页面刷新时Array 会自动重置。

示例代码：-

Jsp

<a4j:commandButton value="Test1" onclick="return newTab('test1.jsp');"/>
<a4j:commandButton value="Test2" onclick="return newTab('test2.jsp');"/>
<a4j:commandButton value="Test3" onclick="return newTab('test3.jsp');"/> 

<a4j:commandButton value="Close Tab" onclick="closeTabs();"/>

JavaScript

  var windowObject = new Array();
  function newTab(mypage)
     {
        var newwin=window.open(mypage);
        windowObject.push(newwin);
        return false;
     }

  function closeTabs()
     {
        for (i = 0; i < windowObject.length; i++) 
            {
              windowObject[i].close();
            }
     }

帮我解决这个问题。

【问题讨论】：

我认为不可能将对象存储到 localStorage。您可以存储参考（名称/ID）。但是我再次怀疑你是否会找到一种方法来创建一个浏览器选项卡对象并能够关闭它，因为这将是一个主要的安全问题。
@Jeff，我已经尝试使用 localStorage 但无法获取浏览器选项卡对象。

标签： javascript jsp

【解决方案1】：

如果您关闭/刷新主选项卡，那么您将丢失数组数据并且您将无法关闭已打开的选项卡。

解决此问题的可能解决方案是，将选项卡信息保存在本地存储中，以便每次调用 close() 时从本地存储中获取选项卡名称，然后对其进行迭代并关闭打开的选项卡。

local-storage 仅支持存储字符串类型变量，您可以在下面关于如何在 localstorage 中存储和检索数组的问题中看到。 How do I store an array in localStorage?

【讨论】：

如您所说，本地存储仅存储字符串类型。所以它没有帮助。有没有其他办法？？？
您可以将 JSON 字符串化（）并将其存储在本地存储中，浏览我的答案中添加的链接。没有其他方法可以在选项卡之间传递数据。
我试过了，但我在 firebug 中遇到了类似“SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data”的异常。见代码->w3schools.com/code/tryit.asp?filename=FQ9WE16E6M0I

【解决方案2】：

TLDR；理论上是做不到的。实际上，您总能找到解决方法。

为什么我们不能存储对窗口的引用

刷新页面时，您无法保留对窗口（即具有关联方法的对象）的实际引用，因为您存储它的唯一位置是 cookie ，或本地存储。但这些只允许您存储数据的字符串表示形式。因此，一旦页面重新加载，您就不能再使用这些 window 元素了。 （即使您可以存储实际的对象，它们也将是无用的副本 - 不是完整的 circular Objects，例如 window）

解决办法

我发现你的问题很有趣，所以我尝试了这个概念证明：

两种类型的页面

Master 页面将能够打开 Slave 页面。只要您不刷新它，它也可以关闭它们。但如果你这样做了，你需要想办法给他们留言，让他们知道他们应该关闭。

在冰箱上留言

在这里，我们的冰箱将是localStorage。当 slave 页面打开时，它会在冰箱上添加一个便利贴，给出它的 ID 和状态。 master 页面可以访问和修改此便利贴。每个slave都会定期检查其关联的便利贴，看看它是否应该关闭自己。

您可以创建的算法

这个伪代码以一种简单的方式展示了你如何做到这一点。

母版页脚本

// If the page was simply refreshed, we want to cancel our
// post-it modifications before they take effect
when (window_is_loaded) :
    cancel_previous_postit_modifications()

when (open_slaves_button_is_clicked) :
    open_slaves()

// Here, we know we can close the slaves
when (close_slaves_button_is_clicked) :
    tell_slaves_to_close()

// Here, we don't know whether this is a refresh or not,
// So we tell them to wait, and close if they don't here back from us
when (window_is_being_unloaded) :
    tell_slaves_to_close_after_delay()

从属页面脚本

when (window_is_loaded) :
    create_postit_note()

when (window_is_being_unloaded) :
    remove_postit()

every (X milliseconds) :
    if (status_on_postit_is('willBeClosed')) :
        change_status_to('shouldBeClosed')
    else if (status_on_postit_is('shouldBeClosed')) :
        close_window()

测试代码

为了检查这是否可行，我创建了一个测试项目：

完整代码： https://github.com/blex41/slave-windows

现场演示： Here

【讨论】：