เบราว์เซอร์ sessionStorage แชร์ระหว่างแท็บหรือไม่

ฉันมีค่าบางอย่างในเว็บไซต์ของฉันซึ่งฉันต้องการลบเมื่อปิดเบราว์เซอร์ ฉันเลือกที่sessionStorageจะเก็บค่าเหล่านั้น เมื่อปิดแท็บพวกเขาจะถูกล้างอย่างแน่นอนและเก็บไว้หากผู้ใช้กด f5; แต่ถ้าผู้ใช้เปิดลิงค์ในแท็บอื่นค่าเหล่านี้จะไม่สามารถใช้ได้

ฉันจะแชร์sessionStorageค่าระหว่างแท็บเบราว์เซอร์ทั้งหมดกับแอปพลิเคชันของฉันได้อย่างไร

กรณีการใช้งาน: ใส่ค่าในที่เก็บข้อมูลบางอย่างเก็บค่านั้นไว้ในแท็บเบราว์เซอร์ทั้งหมดและล้างค่าหากปิดแท็บทั้งหมด

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

คุณสามารถใช้ localStorage และ "storage" eventListener เพื่อถ่ายโอนข้อมูล 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, ie9

วิธีนี้ "ควรทำงานใน IE8" แต่ฉันไม่สามารถทดสอบได้เนื่องจาก IE ของฉันหยุดทำงานทุกครั้งที่ฉันเปิดแท็บ .... แท็บใด ๆ ... บนเว็บไซต์ใด ๆ (IE ดีดี) PS: คุณจะต้องมี JSON shim ด้วยถ้าคุณต้องการ IE8 เช่นกัน :)

เครดิตไปที่บทความเต็มรูปแบบนี้: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

ใช้sessionStorageสำหรับสิ่งนี้เป็นไปไม่ได้

จากเอกสาร MDN

การเปิดหน้าเว็บในแท็บหรือหน้าต่างใหม่จะทำให้เซสชันใหม่เริ่มต้น

ซึ่งหมายความว่าคุณไม่สามารถแชร์ระหว่างแท็บได้ด้วยเหตุนี้คุณควรใช้ localStorage

1. คุณก็สามารถใช้และจำไว้ว่าวันที่มันถูกสร้างขึ้นเป็นครั้งแรกในlocalStorage session cookieเมื่อlocalStorage"เซสชั่น" เก่ากว่าค่าของคุกกี้แล้วคุณสามารถล้างlocalStorage

   ข้อเสียของเรื่องนี้คือใครบางคนยังสามารถอ่านข้อมูลได้หลังจากปิดเบราว์เซอร์ดังนั้นจึงไม่ใช่วิธีที่ดีถ้าข้อมูลของคุณเป็นแบบส่วนตัวและมีความมั่นใจ

2. คุณสามารถจัดเก็บข้อมูลของคุณlocalStorageเป็นเวลาสองสามวินาทีและเพิ่มฟังเหตุการณ์สำหรับstorageเหตุการณ์ วิธีนี้จะทำให้คุณรู้ว่าเมื่อใดที่แท็บใดเขียนสิ่งใดไปยังlocalStorageและคุณสามารถคัดลอกเนื้อหาไปsessionStorageที่localStorage

การดูพื้นที่อื่นจริง ๆ ถ้าคุณเปิดด้วย _blank มันจะเก็บ sessionStorage ไว้ตราบเท่าที่คุณเปิดแท็บเมื่อพาเรนต์เปิดอยู่:

ในลิงค์นี้มี jsfiddle ที่ดีสำหรับทดสอบ sessionStorage ในหน้าต่างใหม่ไม่ว่างเปล่าเมื่อติดตามลิงก์ที่มี target = "_ blank"

โซลูชันของฉันที่ไม่มี sessionStorage ที่สามารถถ่ายโอนผ่านแท็บได้คือการสร้าง localProfile และแก้ไขตัวแปรนี้ หากตัวแปรนี้ถูกตั้งค่าไว้ แต่ตัวแปร sessionStorage ของฉันไม่ทำงานไปข้างหน้าและกำหนดค่าเริ่มต้นใหม่ เมื่อผู้ใช้ออกจากหน้าต่างปิดปิดทำลายตัวแปร localStorage นี้

นี่เป็นวิธีการป้องกันการตัดเซสชันระหว่างแท็บเบราว์เซอร์สำหรับแอปพลิเคชัน Java สิ่งนี้จะใช้ได้กับ IE (JSP / Servlet)

1. ในหน้า JSP แรกของคุณเหตุการณ์ onload เรียก servlet (ajex call) เพื่อตั้งค่า "window.title" และตัวติดตามเหตุการณ์ในเซสชัน (เพียงตัวแปรจำนวนเต็มที่ตั้งเป็น 0 ครั้งแรก)
2. ตรวจสอบให้แน่ใจว่าไม่มีหน้าอื่น ๆ ตั้งค่า window.title
3. หน้าทั้งหมด (รวมถึงหน้าแรก) เพิ่มจาวาสคริปต์เพื่อตรวจสอบชื่อหน้าต่างเมื่อการโหลดหน้าเสร็จสมบูรณ์ หากไม่พบชื่อเรื่องให้ปิดหน้า / แท็บปัจจุบัน (ให้แน่ใจว่าได้เลิกทำฟังก์ชั่น "window.unload" เมื่อสิ่งนี้เกิดขึ้น)
4. ตั้งค่าหน้าหน้าต่างให้โหลดเหตุการณ์สคริปต์ java (สำหรับทุกหน้า) เพื่อจับภาพเหตุการณ์การรีเฟรชหน้าหากมีการรีเฟรชหน้าแล้วให้โทรเซิร์ฟเล็ตเพื่อรีเซ็ตตัวติดตามเหตุการณ์

1) หน้าแรก 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) 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 - การแมปเซิร์ฟเล็ต

<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) รหัส servlet

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");
} 
  }