Javascript 浏览器会话存储。在选项卡之间共享？

我的站点中有一些值，我想在浏览器关闭时清除这些值。我选择sessionStorage来存储这些值。当tab关闭时，它们确实被清除，如果用户按f5，它们将被保留；但是，如果用户在其他选项卡中打开某些链接，则这些值不可用

如何在应用程序的所有浏览器选项卡之间共享会话存储值

用例：将一个值放入某些存储中，在所有浏览器选项卡中保持该值可访问，并在所有选项卡关闭时清除该值

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

无法为此使用会话存储

从

在新选项卡或窗口中打开页面将导致新会话被删除 发起

这意味着您不能在选项卡之间共享，为此，您应该使用localStorage

您只需使用localStorage并记住它在会话cookie中首次创建的日期。当localStorage会话早于cookie的值时，您可以清除localStorage会话

这样做的缺点是，在浏览器关闭后，仍有人可以读取数据，因此，如果您的数据是私有和机密的，那么这不是一个好的解决方案

您可以将数据存储到localStorage几秒钟，然后为存储事件添加事件侦听器。通过这种方式，您将知道任何选项卡何时向localStorage写入了内容，您可以将其内容复制到sessionStorage，然后只需清除localStorage即可

---

下面是一个解决方案，用于防止java应用程序的浏览器选项卡之间的会话剪切。这对IE有用 JSP/Servlet

在您的第一个JSP页面中，onload事件调用servlet ajex调用，以在会话中设置window.title和事件跟踪器首次将整数变量设置为0 确保没有其他页面设置window.title 包括第一页在内的所有页面在页面加载完成后添加一个java脚本来检查窗口标题。如果找不到标题，请关闭当前页面/选项卡。出现此情况时，请确保撤消window.unload函数 为所有页面设置page window.onLoad java script event以捕获页面刷新事件，如果页面已刷新，请调用servlet重置事件跟踪器。 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();
  }
 }

3web.xml-servlet映射

<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>

---

您可以使用localStorage及其storage eventListener将会话存储数据从一个选项卡传输到另一个选项卡

此代码需要存在于所有选项卡上。它应该在其他脚本之前执行

// 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、ie 11、ie 10、ie9中测试了这个

这个方法应该在IE8中工作，但我无法测试它，因为每次我打开标签时，我的IE都会崩溃。。。。任何标签。。。在任何网站上。好的ol IE PS：如果您还想要IE8支持，显然需要包含JSON垫片

这篇完整的文章值得赞扬：

---

实际上，如果在其他区域打开时为空，则只要在父项打开时打开选项卡，就会保持会话存储：

在这个链接中，有一个很好的JSFIDLE来测试它。

---

我的解决方案是创建一个localProfile并关闭这个变量，以避免会话存储在选项卡上转移。如果设置了此变量，但我的会话存储变量不存在，请继续并重新初始化它们。当用户注销窗口关闭时，销毁此localStorage变量

好的，我知道了，但如何在关闭所有浏览器选项卡时清除localStorage？您可以将文档cookie更改为path='/'，从而在关闭浏览器窗口时强制清除它。但对于标签，我现在还不知道。好的，我会深入挖掘，让你知道如果我找到了解决方案，让我们现在想想它是什么impossible@Anmol是的，但是我已经不能提供任何代码了，那是很久以前的事了。这是一个丑陋的解决方案，但它对我来说非常有效。这里的关键是将tabsOpened计数器保留在本地存储中，并在页面加载时增加它，但在页面卸载时减少它。所以当pageunload和tabsOpen==1时，它是最后一个选项卡，我们可以清除所有内容。有些小事情我需要处理，但记不清具体是什么。希望它能帮助你@VladimirGordienko如果删除本地存储数据的卸载事件是因为有人导航到同一选项卡中的不同域而发生的，该怎么办。在我看来，这将错误地删除localStorage数据-该选项卡没有关闭，如果该用户返回，他/她将再次需要该数据，对吗。不管怎么说，这是一个有趣的方法，没有想到：-这个解决方案有多可靠？由于它是基于事件的，是否有可能丢失事件？根据这里的答案，我在localStorage和sessionStorage上创建了一个库来简化此过程。现在您只需调用storageManager.saveSyncedSessionData'data'，'key'；或storageManager.savePermanentData'data'，'key'；，等等，根据你的需要。完整的代码在这里：事件不会在所有以前打开的选项卡中触发吗？看起来BroadcastChannel现在是一个很好的工具。这不是一个糟糕的解决方案吗

---

所有在本地存储中侦听更改的选项卡都可以读取会话存储吗？如果你这样让自己变得脆弱，那么使用SessionStorage的全部意义是什么？是的，这是可行的，但在某种程度上，您只是使用localstorage而不是session。这个问题是关于javascript的，它与javascript无关。这个问题更多的是关于sessionStorage和LocalStorages。我觉得奇怪的是，它作为一个副本关闭了。提名重新开放。另一个主题是关于如何在多个选项卡之间进行通信，这听起来不同，而且在我开始阅读另一个主题时也不同。可以使用cookies吗？默认情况下哪一个会这样？但是事实上，对于get和set操作，他们将需要进一步的实现。显然，在某个时间点上，sessionStorage在各个选项卡之间保持同步：如果您在这个线程上，您可能还想知道sessionStorage的原始用例是什么？请参阅：这在Chromium中有效，但在FF中无效。如何在用户关闭选项卡时销毁本地存储

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