两页之间的 sessionStorage

Posted 2023-03-05

【中文标题】两页之间的 sessionStorage

【英文标题】：sessionStorage between two pages

【发布时间】：2015-10-19 05:11:09

【问题描述】：

我试图在一个页面上设置一个变量，然后在另一个页面上显示它。两个页面都存在于同一个域中。我以前从未使用过 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...";

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

【问题讨论】：

一些阅读了关于何时使用 sessionStorage 以及何时使用 localStorage here 和 here

【参考方案1】：

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/

【讨论】：

任何代码的解释总是值得赞赏的。

【参考方案2】：

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

所以使用：

localStorage.setItem("score",12);

和

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

在另一个标签中

想想 sessionStorage 存储局部变量，而 localStorage 存储全局变量。

【讨论】：

好的，我做到了，但第二个标签仍然只是一个空白页，似乎没有得到更新的变量

你能把所有的代码粘贴到这里或者把我链接到codepen/jsfiddle吗？可能是你做错了什么

如果你在两个页面上分开你的代码，你确定结果元素在两个页面上都存在吗？

好的，一旦你说我回顾了代码并意识到它在正确的位置被调用。感谢您的帮助

np 老兄很乐意提供帮助:)

【参考方案3】：

如sessionStorage描述：

当页面会话结束时它会被清除 在新选项卡或窗口中打开页面将导致启动新会话

改用 localStorage

【讨论】：

其实我本来是用localStorage的，但是发生了同样的事情，第二页就黑屏了。知道为什么吗？

【参考方案4】：

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

请改用localStorage。

【讨论】：

我使用 localStorage 时发生了同样的事情