tarayıcı oturumu sekmeler arasında paylaşılsın mı?

Sitemde tarayıcı kapatıldığında silmek istediğim bazı değerler var. sessionStorageBu değerleri saklamayı seçtim . Sekme kapatıldığında, gerçekten temizlenir ve kullanıcı f5 tuşuna basarsa saklanır; Ancak kullanıcı farklı bir sekmede bir bağlantı açarsa bu değerler kullanılamaz.

sessionStorageUygulamamla tüm tarayıcı sekmeleri arasında değerleri nasıl paylaşabilirim ?

Kullanım örneği: bir depolama alanına bir değer koyun, bu değeri tüm tarayıcı sekmelerinde erişilebilir tutun ve tüm sekmeler kapalıysa temizleyin.

if (!sessionStorage.getItem(key)) {
    sessionStorage.setItem(key, defaultValue)
}

SessionStorage verilerini bir sekmeden diğerine aktarmak için localStorage ve "depolama" eventListener öğelerini kullanabilirsiniz.

Bu kodun TÜM sekmelerde bulunması gerekir. Diğer komut dosyalarınızdan önce yürütülmelidir.

// 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');
};

Bunu chrome, ff, safari, yani 11, yani 10, ie9'da test ettim

Bu yöntem "IE8 çalışmalıdır" ama herhangi bir web sitesinde bir sekme .... herhangi bir sekme ... her zaman benim IE çöküyor gibi test edemedim. (iyi ol IE) PS: IE8 desteği de istiyorsanız bir JSON şim eklemeniz gerekir. :)

Kredinin tamamı bu makaleye gidiyor: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

Bunun için kullanmak sessionStoragemümkün değildir.

Gönderen MDN Dokümanlar

Bir sayfayı yeni bir sekmede veya pencerede açmak yeni bir oturumun başlatılmasına neden olur.

Bu sekmeler arasında paylaşamayacağınız anlamına gelir, bunun için kullanmalısınız localStorage

1. Sadece localStorageilk oluşturulduğu tarihi kullanabilir ve hatırlayabilirsiniz session cookie. Ne zaman localStorage"oturum" çerez değerinden daha eski o zaman açık olabilirlocalStorage

   Bunun eksileri, tarayıcı kapatıldıktan sonra hala verileri okuyabilmesidir, bu nedenle verileriniz özel ve gizli ise iyi bir çözüm değildir.

2. Verilerinizi localStoragebirkaç saniye boyunca saklayabilir ve bir storageetkinlik için olay dinleyicisi ekleyebilirsiniz . Bu şekilde, sekmelerden herhangi birine ne zaman bir şey yazdığınızı bileceksiniz localStorageve içeriğini adresine kopyalayabilirsiniz sessionStorage, ardındanlocalStorage

Aslında diğer alanlara bakarken, _blank ile açarsanız, üst öğe açıkken sekmeyi açtığınız sürece sessionStorage'ı tutar:

Bu bağlantıda, test etmek için iyi bir jsfiddle var. target = "_ blank" ile bir bağlantıyı izlerken yeni pencerede sessionStorage boş değil

SessionStorage sekmeler üzerinden aktarılabilir sahip değil benim çözüm bir localProfile oluşturmak ve bu değişkeni patlama oldu. Bu değişken ayarlanırsa ancak sessionStorage değişkenlerim açık değilse devam edin ve yeniden başlatın. Kullanıcı pencereyi kapattığında bu localStorage değişkenini yok edin

İşte bir java uygulaması için tarayıcı sekmeleri arasında oturum kesilmesini önlemek için bir çözüm. Bu IE için çalışacaktır (JSP / Servlet)

1. İlk JSP sayfanızda onload olayı, oturumda bir "window.title" ve olay izleyici kurmak için bir sunucu uygulamasını (ajex çağrısı) arayın (ilk kez 0 olarak ayarlanacak bir tamsayı değişkeni)
2. Diğer sayfaların hiçbirinin bir pencere ayarlamadığından emin olun.
3. Tüm sayfalar (ilk sayfa dahil), sayfa yükleme işlemi tamamlandığında pencere başlığını kontrol etmek için bir java komut dosyası ekler. başlık bulunamazsa geçerli sayfayı / sekmeyi kapatın (bu gerçekleştiğinde "window.unload" işlevini geri aldığınızdan emin olun)
4. Sayfa penceresini ayarlayın. Sayfa yenileme olayını yakalamak için java komut dosyası olayını (tüm sayfalar için) yükleyin, bir sayfa yenilendiyse olay izleyiciyi sıfırlamak için sunucu uygulamasını arayın.

1) ilk sayfa JS

BODY onload="javascript:initPageLoad()"

function initPageLoad() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                           var serverResponse = xmlhttp.responseText;
            top.document.title=serverResponse;
        }
    };
                xmlhttp.open("GET", 'data.do', true);
    xmlhttp.send();

}

2) tüm sayfalar için ortak JS

window.onunload = function() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {             
            var serverResponse = xmlhttp.responseText;              
        }
    };

    xmlhttp.open("GET", 'data.do?reset=true', true);
    xmlhttp.send();
}

var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
    init();
    clearInterval(readyStateCheckInterval);
}}, 10);
function init(){ 
  if(document.title==""){   
  window.onunload=function() {};
  window.open('', '_self', ''); window.close();
  }
 }

3) web.xml - sunucu uygulaması eşleme

<servlet-mapping>
<servlet-name>myAction</servlet-name>
<url-pattern>/data.do</url-pattern>     
</servlet-mapping>  
<servlet>
<servlet-name>myAction</servlet-name>
<servlet-class>xx.xxx.MyAction</servlet-class>
</servlet>

4) Sunucu kodu

public class MyAction extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws IOException {
    Integer sessionCount = (Integer) request.getSession().getAttribute(
            "sessionCount");
    PrintWriter out = response.getWriter();
    Boolean reset = Boolean.valueOf(request.getParameter("reset"));
    if (reset)
        sessionCount = new Integer(0);
    else {
        if (sessionCount == null || sessionCount == 0) {
            out.println("hello Title");
            sessionCount = new Integer(0);
        }
                          sessionCount++;
    }
    request.getSession().setAttribute("sessionCount", sessionCount);
    // Set standard HTTP/1.1 no-cache headers.
    response.setHeader("Cache-Control", "private, no-store, no-cache, must-                      revalidate");
    // Set standard HTTP/1.0 no-cache header.
    response.setHeader("Pragma", "no-cache");
} 
  }