Сесія браузера частка між вкладками?

У мене на сайті є деякі значення, які я хочу очистити, коли браузер закритий. Я вирішив sessionStorageзберігати ці значення. Коли вкладка закрита, вони дійсно очищаються та зберігаються, якщо користувач натискає f5; Але якщо користувач відкриє якесь посилання на іншій вкладці, ці значення недоступні.

Як я можу поділитися sessionStorageзначеннями між усіма вкладками браузера за допомогою мого додатка?

Випадок використання: поставте значення в деякий сховище, збережіть це значення доступним на всіх вкладках браузера та очистіть його, якщо всі вкладки закриті.

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

Ви можете використовувати localStorage та його "зберігання" 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');
};

Я перевірив це в chrome, ff, safari, тобто 11, тобто 10, тобто9

Цей метод "повинен працювати в IE8", але я не міг перевірити його, оскільки мій IE виходив з ладу кожен раз, коли я відкривав вкладку .... будь-яку вкладку ... на будь-якому веб-сайті. (добре ol IE) PS: вам, очевидно, потрібно буде включити прокладку JSON, якщо ви хочете також підтримати 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"сеанс" старший за значення файлу cookie, ви можете очиститиlocalStorage

   Мінуси цього полягають у тому, що хтось все ще може читати дані після закриття браузера, тому це не є гарним рішенням, якщо ваші дані приватні та конфіденційні.

2. Ви можете зберігати свої дані localStorageпротягом декількох секунд і додавати слухача події до storageподії. Таким чином, ви дізнаєтесь, коли будь-яка з вкладок щось написав на, localStorageі ви зможете скопіювати її вміст у sessionStorage, а потім просто очиститиlocalStorage

Насправді дивлячись на інші області, якщо ви відкриваєтесь за допомогою _blank, він зберігає sessionStorage до тих пір, поки ви відкриєте вкладку, коли батьків відкритий:

У цьому посиланні є хороша jsfiddle, щоб перевірити її. sessionStorage у новому вікні не порожній, коли переходить посилання з target = "_ blank"

Моє рішення не мати sessionStorage для передачі через вкладки - створити localProfile і відбити цю змінну. Якщо ця змінна встановлена, але мій змінний sessionStorage не вдасться і реініціалізувати їх. Коли користувач виходить із вікна, він закривається, знищуйте цю змінну localStorage

Ось рішення, щоб запобігти зсуву сеансу між вкладками браузера для програми java. Це буде працювати для IE (JSP / Servlet)

1. На своїй першій сторінці JSP завантажте сервлет (виклик ajex), щоб встановити "window.title" та трекер подій у сеансі (просто ціла змінна, яку слід встановити як 0 вперше)
2. Переконайтеся, що жодна з інших сторінок не встановила window.title
3. Всі сторінки (включаючи першу сторінку) додають сценарій Java для перевірки заголовка вікна, коли завантаження сторінки завершено. якщо заголовок не знайдено, закрийте поточну сторінку / вкладку (обов'язково скасуйте функцію "window.unload", коли це відбувається)
4. Встановіть сторінку window.onunload подія java script (для всіх сторінок) для захоплення події оновлення сторінки, якщо сторінка оновлена, зателефонуйте на сервлет, щоб скинути трекер подій.

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