Question

我有一个Web应用程序，用于存储有关最近访问过的页面的信息，让我们称之为A.当用户访问另一个名为B的页面类型时，我在顶部呈现一个菜单，其中有一个按钮，指向最近访问过的A -页。 B页可通过A页或B页访问，并且可由用户视为A的属性。

这种方法很好但是当有人打开两个标签时，当它位于标签1中的B页上并且链接到A页A1时，它们会打开一个新标签并访问A页A2。当用户然后刷新选项卡1中的B页时，菜单变为A2。我希望能够识别正在使用的选项卡，以便我可以为选项卡1保存A1，以便它不会更改为A2。

使用一个标签时：

A1 -> B1 -> B2 (the menu points back to A1)

使用两个标签时：

Time            | T1       | T2       | T3          
----------------+----------+----------+-------------
Tab 1:          | A1 -> B1 |          | [refresh B1]
Tab 2:          |          | A2 -> B3 |             
----------------+----------+----------+-------------
Menu points to: | A1    A1 | A2    A2 | A2

当用户返回选项卡1时，这会使用户在选项卡2（A2）而不是A1中查看用户时会感到困惑。

我担心无法获取浏览器标签ID，但有人可能有任何解决方法的想法？

Answer 1

HTML5 sessionStorage解决了这个问题：

网站可以将数据添加到会话存储中，并且该窗口中打开的同一网站的任何页面都可以访问该数据。

是supported by all modern browsers

另一种方法是使用window.name属性。它是特定于选项卡/窗口的，并且在浏览器导航时保持不变。因此，您可以在window.name属性

中存储一些标签ID

Answer 2

编辑：时间的推移使我2012年的原始回答不正确。正如bedrin指出的那样，您现在可以使用Window.sessionStorage object：

sessionStorage属性允许您访问当前源的会话存储对象。 sessionStorage类似于Window.localStorage，唯一的区别是当localStorage中存储的数据没有到期设置时，存储在sessionStorage中的数据在页面会话结束时被清除。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话，这与会话cookie的工作方式不同。

原始答案（2012）：

我担心这不可能以便携的方式进行，因为您已经发现自己无法检索类似浏览器标签ID的内容。据我所知，HTML标准完全不知道浏览器中的标签。

我能想到的唯一解决方法是：在应用程序中实现和管理选项卡。我见过几个这样做的商业Web应用程序，但是（imho）用户体验非常糟糕。

Answer 3

所以我做了一个似乎工作得很好的解决方案 NO IT DOESNT。查看最后一个问题 - 子弹。我仍然希望有更好的想法，所以如果你已经有了，请告诉我！

反正;这是我如何做到的。请记住，这不是一个100％万无一失的解决方案，如果用户“行为不端”并刷新多个标签，同时它可能会混淆：

base.html （所有网页都继承）（{{A}}从Django呈现变量）：

// This is executed right before leaving the page
window.onunload = function() {
    if( '{{ A }}' != null ) 
        var prev_A = '{{ A }}';
    else if (typeof previous_A != 'undefined') {
        var prev_A = previous_A;
    else 
        var prev_A = '';
    localStorage.setItem('a', prev_A);
};
// Remove the local storage as soon as you get to this page
localStorage.removeItem('a');

B_base.html （所有B的基本模板.B_base.html也继承了base.html。我把这段代码放在base.html代码之前执行）

var previous_A = localStorage.getItem('a');

所以基本上我得到的是每个页面在离开页面时设置localStorage'a'并在它进入页面后立即删除localStorage'a'，除了首先保存'a'的B页面在删除它之前作为局部变量。

问题：

同时打开多个标签中的链接会覆盖此变量，而一个标签将没有previous_A。
关闭A标签而不去任何地方，然后直接打开一个新的B页面将导致B-tab在其previous_A中具有已关闭的A值。
在A-page的新标签页中打开B-links并没有给他们链接回...这是一个交易破坏者。

存储浏览器选项卡特定数据

3 个答案: