为什么 a 标签打开的新窗口中 sessionStorage 不起作用？

2023-09-23 15:51:45

在许多情况下，我们希望在不同的浏览器窗口之间共享数据。例如，我们可能希望在用户登录后，在所有打开的窗口中都保持登录状态。在这种情况下，sessionStorage 就派上用场了。sessionStorage 是一个存储在浏览器中的临时数据存储，它不会在浏览器会话之间保存。

然而，当我们使用 a 标签打开一个新窗口时，新窗口中的 sessionStorage 是空的。这是因为 a 标签打开的新窗口是一个完全独立的窗口，它没有与父窗口共享任何数据。

要解决这个问题，我们可以使用 window.opener 属性。window.opener 属性返回打开当前窗口的窗口。我们可以使用这个属性来访问父窗口的 sessionStorage，并将数据复制到新窗口的 sessionStorage 中。

以下是如何使用 window.opener 属性来解决这个问题的示例代码：

// 在父窗口中
window.sessionStorage.setItem('username', 'john');

// 在新窗口中
var parentWindow = window.opener;
var username = parentWindow.sessionStorage.getItem('username');

// 使用 username

使用这种方法，我们就可以在不同的浏览器窗口之间共享数据了。

除了使用 window.opener 属性，我们还可以使用 postMessage API 来在不同的浏览器窗口之间共享数据。postMessage API 允许一个窗口向另一个窗口发送消息。

以下是如何使用 postMessage API 来解决这个问题的示例代码：

// 在父窗口中
window.addEventListener('message', function(event) {
  if (event.data.type === 'set_username') {
    window.sessionStorage.setItem('username', event.data.username);
  }
});

// 在新窗口中
var parentWindow = window.opener;
parentWindow.postMessage({
  type: 'set_username',
  username: 'john'
}, '*');

// 使用 username
var username = window.sessionStorage.getItem('username');