web-dev-qa-db-ja.com

ブラウザーsessionStorage。タブ間で共有しますか？

私はサイトにいくつかの値があり、ブラウザが閉じているときにクリアしたい、その値を保存するためにsessionStorageを選択し、タブが閉じているときにクリアし、ユーザーがf5を押すと保存を続けるが、ユーザーが別のタブでいくつかのリンクを開くとこの値利用できません。アプリケーションですべてのブラウザタブ間でsessionStorage値を共有するにはどうすればよいですか？

ユースケース：何らかのストレージに値を配置し、すべてのブラウザータブでその値にアクセスできるようにし、すべてのタブが閉じている場合はクリアします。

if (!sessionStorage.getItem(key)) {
    sessionStorage.setItem(key, defaultValue)
}
javascriptcross-browsersession-storage
113
Vladimir Gordienko

LocalStorageとその「storage」eventListenerを使用して、1つのタブから別のタブにsessionStorageデータを転送できます。

このコードは、すべてのタブに存在する必要があります。他のスクリプトの前に実行する必要があります。

// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};

私はこれをクローム、ff、サファリ、すなわち11、すなわち10、すなわち9でテストしました

このメソッドは「IE8で動作するはずです」が、タブを開くたびにIEがクラッシュするため、テストできませんでした。 （良いol IE）PS：IE8のサポートも必要な場合は、明らかにJSONシムを含める必要があります。 :)

クレジットはこの記事全体に行きます： http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

105
nawlbergs

これにsessionStorageを使用することはできません。

MDN Docs から

新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されます。

つまり、タブ間で共有できないため、localStorageを使用する必要があります

61
Henrik Andersson

  1. localStorageを使用するだけで、session cookieで最初に作成された日付を記憶できます。 localStorage "session"がcookieの値よりも古い場合、localStorageをクリアできます

    これの短所は、ブラウザを閉じた後でも誰かがデータを読むことができるということです。したがって、データがプライベートで信頼できるものである場合、それは良い解決策ではありません。

  2. データをlocalStorageに数秒間保存し、storageイベントのイベントリスナーを追加できます。これにより、タブのいずれかがlocalStorageに何かを書き込んだことを知ることができ、その内容をsessionStorageにコピーしてから、localStorageをクリアすることができます。

8
Adassko

実際に他の領域を見ると、_blankで開くと、親が開いているときにタブを開いている限り、sessionStorageが保持されます。

このリンクには、テストするのに適したjsfiddleがあります。 target = "_ blank"でリンクをたどる場合、新しいウィンドウのsessionStorageは空ではありません

7
Dan Parker

SessionStorageをタブで転送できないようにするための私の解決策は、localProfileを作成し、この変数をバングオフすることでした。この変数が設定されているが、sessionStorage変数が先に進み、それらを再初期化する場合。ユーザーがウィンドウを閉じると、このlocalStorage変数が破棄されます

0
yardpenalty