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



我有一个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,但有人可能有什么解决办法?

HTML5会话存储解决了这个问题:

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

所有现代浏览器都支持它

另一种方法是使用window.name属性。它是特定于选项卡/窗口的,在浏览器导航时将保持不变。因此,您可以在window.name属性中存储一些标签id之王

编辑:时间的流逝使我2012年的原始答案不正确。正如bedrin所指出的,您现在可以使用Window.sessionStorage对象:

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

原始答案(2012):

我担心这不可能以可移植的方式实现,因为你自己已经发现,不可能检索到像浏览器选项卡ID这样的东西。据我所知,HTML标准完全不知道浏览器中的选项卡。

我能想到的唯一解决办法是:在应用程序中实现和管理选项卡。我见过几个这样做的商业web应用程序,但(imho)用户体验相当糟糕。

所以我做了一个解决方案,看起来效果很好没有问题。请参阅最后一个问题项目符号。我仍然希望有更好的想法,所以如果你成功了,请告诉我!

无论如何;以下是我的做法。请记住,这不是一个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",但B页面除外,它们在删除之前先将"a"保存为本地变量。

问题:

  • 同时打开多个选项卡中的链接将覆盖此变量,并且一个选项卡将没有previous_A
  • 关闭一个A选项卡而不去任何地方,然后直接打开一个新的B页,将导致B选项卡在其previous_A中具有关闭的A值
  • 从A页打开新选项卡中的B链接不会返回链接。。。这是交易破坏者

相关内容

  • 没有找到相关文章