ブラウザのタブ固有のデータを保存する

Question

最近訪問したページに関する情報を格納するWebアプリケーションがあります.Aと呼んでいます。ユーザーがBと呼ばれる別のページタイプを訪問すると、直前に訪問したAページ。 BページはAページまたはBページのいずれかからアクセスでき、ユーザーはAのプロパティと考えることができます。

これはうまくいきますが、誰かが2つのタブを開いてBページ1では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

編集：時間の経過は、2012年の私の元の答えが間違っていた。ベッドラインが指摘するように、Window.sessionStorage objectを使用できるようになりました。

sessionStorageプロパティを使用すると、現在の原点のセッションストレージオブジェクトにアクセスできます。 sessionStorageはWindow.localStorageと似ていますが、唯一の違いは、localStorageに格納されたデータの有効期限が設定されていない間に、ページセッションが終了したときにsessionStorageに格納されたデータが消去されることです。ページセッションは、ブラウザが開いている間は続き、ページの再読み込みとリストアを繰り返します。新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されます。セッションクッキーの動作とは異なります。

オリジナル回答（2012）：

私はあなたはブラウザのタブのIDのようなものを取得することはできません自分自身を発見したとして、これは、移植性のある形で行うことはできません怖いです。 HTML標準は、私が知っている限り、ブラウザのタブを完全に認識していません。

私が考えることができる唯一の回避策は次のとおりです。アプリケーションのタブを実装して管理する。私はこれを行ういくつかのビジネスWebアプリケーションを見てきましたが、（imho）ユーザーエクスペリエンスはかなり悪いです。

Answer 2

だから私はかなり良い NO ITのdoesntが動作しているようですひとつのソリューションを作りました。最後の問題点を参照してください。私はまだ良いアイデアを願っていますので、あなたが持っているなら、私に教えてください！

とにかく;ここで私はそれをやった。ユーザーが混乱を招くと同時に、複数のタブを混乱させて同時にリフレッシュすると、これは100％ばかばかしい解決策ではないことに注意してください。

ベース。HTML（全てのページが継承する）（{{A}は}ジャンゴから変数をレンダリングする）。

// 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を継承。私は「」として「」それはページを離れてのlocalStorageを削除したときにすべてのページはのlocalStorageを設定していることであるので、基本的に私が得るもの）だけbase.html内のコードの前に実行する

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

をこのコードを置きますそれが削除される前にローカル変数として最初に 'a'を保存するBページを除いて、ページに入るとすぐに。

問題：

• 同時に複数のタブでリンクを開くには、この変数を上書きしますし、一つのタブはprevious_Aなしになります。
• どこにも行かずにAタブを閉じると、新しいBページを直接開くと、BタブのAの値はprevious_Aになります。
• A-pageから新しいタブでBリンクを開くと、リンクが戻ってこない...これはデベロッパーだ。

Answer 3

HTML5 sessionStorageは、この問題を解決：

サイトでは、セッションストレージにデータを追加することができ、そしてそれはそのウィンドウで開く同じサイトから任意のページにアクセスできるようになります。

それはsupported by all modern browsers

別のアプローチは、window.nameプロパティを使用することです。これはタブ/ウィンドウに固有であり、ブラウザのナビゲーションでは変更されません。だから、あなたのwindow.nameのプロパティの中にタブIDの王を保存することができます