Question

我正在尝试在一个页面上设置变量，然后将其显示在另一个页面上。两个页面都存在于同一个域中。我之前从未使用过sessionStorage所以我不确定我犯了哪些错误。出于某种原因，第二页只是一个空白页面。以下是设置变量的第一页上的代码。

if (typeof(Storage) != "undefined") {
    // Store
    sessionStorage.setItem("score", 12);
    document.getElementById("result").innerHTML = ("score");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

这是第二页上的代码，它应该检索变量并将其打印到屏幕上。

if (typeof(Storage) != "undefined") {
    // Retrieve
    document.getElementById("result").innerHTML = sessionStorage.getItem("score");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

任何有关为什么没有获得变量的见解都将非常感谢。

Answer 1

"...sessionStorage gets cleared when the page session ends"

改为使用localStorage。

Answer 2

正如Yiriy所指出的，当尝试在浏览器的多个窗口/标签之间共享变量时，应该使用localStorage而不是sessionStorage。

所以使用：

localStorage.setItem("score",12);

和

document.getElementById("result").innerHTML = localStorage.getItem("score");

在另一个标签

中

只需考虑sessionStorage存储局部变量，而localStorage存储全局变量。

Answer 3

与sessionStorage说明一样：

在页面会话结束时清除
在新标签页或新窗口中打开页面将导致启动新会话

改为使用localStorage

Answer 4

if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', Date.now());
};

window.addEventListener('storage', function(event) {
  if (event.key == 'getSessionStorage') {
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    var data = JSON.parse(event.newValue);
    for (key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
});

来源 - https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

sessionStorage在两个页面之间

4 个答案: