브라우저 session스토리지탭 간에 공유하시겠습니까?

브라우저 session스토리지탭 간에 공유하시겠습니까?

내 사이트에는 브라우저가 닫힐 때 지우고 싶은 몇 가지 값이 있습니다.나는 선택했다sessionStorage저장할 수 있습니다.탭이 닫히면 실제로 지워지고 사용자가 f5를 누르면 그대로 유지됩니다. 그러나 사용자가 다른 탭에서 일부 링크를 열면 이러한 값을 사용할 수 없습니다.

공유 방법sessionStorage모든 브라우저 탭 간에 값을 설정할 수 있습니까?

사용 예: 일부 스토리지에 값을 입력하고 모든 브라우저 탭에서 해당 값에 액세스할 수 있도록 유지한 후 모든 탭을 닫으면 해당 값을 지웁니다.

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

local스토리지 및 해당 "스토리지" eventListener를 사용하여 한 탭에서 다른 탭으로 session스토리지 데이터를 전송할 수 있습니다.

이 코드는 모든 탭에 존재해야 합니다.다른 스크립트보다 먼저 실행됩니다.

// 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, safari, 즉 11, 10, i9로 테스트했습니다.

이 방법은 "IE8에서 작동"하지만 탭을 열 때마다 IE가 손상되어 테스트할 수 없었습니다.임의의 탭...모든 웹사이트에서.(양호 IE) PS: IE8도 지원하려면 JSON 심을 추가해야 합니다.:)

이 기사 전문은 http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/ 입니다.

사용.sessionStorage불가능하기 때문입니다.

MDN 문서에서

새 탭 또는 창에서 페이지를 열면 새 세션이 시작됩니다.

즉, 탭 간에 공유할 수 없습니다.이를 위해localStorage

실제로 다른 영역을 살펴보면 _blank로 열면 상위 영역이 열려 있을 때 탭을 여는 동안 sessionStorage가 유지됩니다.

이 링크에는 테스트할 수 있는 좋은 jsfiddle이 있습니다. target="_blank" 링크가 있는 경우 새 창의 sessionStorage가 비어 있지 않습니다.

1. 그냥 사용하시면 됩니다.localStorage이 파일이 처음 생성된 날짜를 기억하십시오.session cookie.언제localStorage"cookie"가 쿠키 값보다 오래되었으므로 cookie 값을 클리어할 수 있습니다.localStorage

   단점은 브라우저가 닫힌 후에도 다른 사용자가 데이터를 읽을 수 있기 때문에 데이터가 비공개이고 기밀인 경우에는 좋은 솔루션이 되지 않는다는 것입니다.

2. 데이터를 저장할 수 있습니다.localStorage몇 초간 이벤트청취자를 추가합니다.storage이렇게 하면 어떤 탭이 어떤 것을 썼는지 알 수 있습니다.localStorage 그 하여 '복사할 수 .sessionStorage 됩니다.localStorage

에 sessionStorage를 은 "sessionStorage"입니다.window.open:

• window.open('./page2.html','')open " " " " " " 2 "
• window.open('./page2.html','height=100, width=100')2번으로 하겠습니다.

Page2는 page1에서 sessionStorage 복사본을 가져올 수 있지만 두 sessionStorage 개체는 서로 독립적입니다.

탭을 통해 sessionStorage를 전송할 수 없는 경우의 해결책은 localProfile을 생성하여 이 변수를 제거하는 것이었습니다.이 변수가 설정되어 있지만 sessionStorage 변수가 다시 초기화되지 않은 경우.사용자가 로그아웃할 때 이 localStorage 변수를 삭제합니다.

, 자료 쓸 수요.sessionStorage a session cookie사용자가 브라우저를 닫거나 쿠키를 클리어할 때까지 활성 상태로 유지됩니다.이데올로기 때문에

쿠키를 설정하는 코드

document.cookie = "cookiename=value; path=/";

expires는 a we we we를 정하다session cookie.

이렇게 불러옵니다.

function getCookie(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

var value = getCookie('cookiename');

다음은 Java 응용 프로그램의 브라우저 탭 간에 세션이 공유되는 것을 방지하는 솔루션입니다.이것은 IE(JSP/Servlet)에서 동작합니다.

1. 첫 번째 JSP 페이지에서 온로드이벤트를 서블릿(ajex 콜)으로 호출하여 세션에서 "window.title"과 이벤트트래커를 설정합니다(처음에는 0으로 설정되는 정수 변수만).
2. 다른 페이지가 창을 설정하지 않았는지 확인합니다.제목
3. 페이지 로드가 완료되면 모든 페이지(첫 페이지 포함)가 Java 스크립트를 추가하여 창 제목을 확인합니다.제목을 찾을 수 없는 경우는, 현재의 페이지/탭을 닫습니다(이러한 경우는, 반드시 「syslog.syslog」기능을 실행 취소해 주세요).
4. 페이지 window.onload 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) 서블릿 코드

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

언급URL : https://stackoverflow.com/questions/20325763/browser-sessionstorage-share-between-tabs