使用 iframe 在不同域之间共享 localStorage 数据不起作用

Question

我正在尝试阅读这篇文章，这篇文章教我们如何在嵌入了 iframe 的情况下在域之间共享本地存储数据。

https://www.internetkatta.com/share-cookies-or-local-storage-data-between-cross-domain

所以为了尝试一下，我创建了两个单独的项目，分别有自己的 html 文件和索引文件。然后，我使用 VS Code 的实时服务器在服务器中启动了两个 html 文件。我试图让 http://127.0.0.1:5500/getlocalstorage.html 将用户登录数据传递给 http://127.0.0.1:5501/getlocalstorage.html，但是，returns localstorage 选项卡中没有数据，只显示为：

我这里有什么地方做错了吗？我正在尝试将虚拟登录信息从 localhost:5500 传递到 localhost:5501。请在下面查看我的代码：

本地主机 5500 的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      function postCrossDomainMessage(msg) {
        var win = document.getElementById("ifr").contentWindow;
        win.postMessage(msg, "http://127.0.0.1:5500/");
      }
      var postMsg = { login: "user" }; // this is just example
      postCrossDomainMessage(postMsg);
    </script>
    <script src="index.js"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe
      style="display: none"
      src="http://127.0.0.1:5501/getlocalstorage.html"
      id="ifr"
    ></iframe>
    <h1>http://127.0.0.1:5500/index.html</h1>
  </body>
</html>

本地主机 5501 的 html 文件(getlocalstorage.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      var PERMITTED_DOMAIN = "http://127.0.0.1:5500";
      /**
       * Receiving message from other domain
       */
      window.addEventListener("message", function (event) {
        if (event.origin === PERMITTED_DOMAIN) {
          //var msg = JSON.parse(event.data);
          // var msgKey = Object.keys(msg)[0];
          if (event.data) {
            localStorage.setItem("localstorage", event.data);
          } else {
            localStorage.removeItem("localstorage");
          }
        }
      });
    </script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>http://127.0.0.1:5501/getlocalstorage.html</h1>
  </body>
</html>

控制台中显示的新错误

localhost 5500 控制台错误

你看到我在这里可能做错了什么吗？谢谢！

这是在 localhost 5500 选项卡中：

并且在 localhost 5501 localstorage 选项卡中：

Answer 1

script 标签在 iframe 标签之前。它也在创建 iframe 之前执行。因此，搜索 ifr returns null 和 null 没有 contentWindow，这会引发错误。您需要在页面加载后推迟 JS 执行，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      function postCrossDomainMessage(msg) {
        var win = document.getElementById("ifr").contentWindow;
        win.postMessage(msg, "http://127.0.0.1:5500/");
      }
      function load() {
          var postMsg = { login: "user" }; // this is just example
          postCrossDomainMessage(postMsg);
      }
    </script>
    <script src="index.js"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="load()">
    <iframe
      style="display: none"
      src="http://127.0.0.1:5501/getlocalstorage.html"
      id="ifr"
    ></iframe>
    <h1>http://127.0.0.1:5500/index.html</h1>
  </body>
</html>

注意load函数在script标签中没有执行，只是定义了。触发它的是 body 中定义的 onload 事件。

编辑

localStorage.setItem("localstorage", event.data); 行使用 'localStorage' 的键和 [Object object] 的值将一个项目存储到 localStorage 中，因为在 localStorage 中你将存储字符串。因此，您需要对您拥有的对象进行字符串化。所以，你需要做类似

的事情

localStorage.setItem("localstorage", JSON.stringify(event.data));

你可以通过

阅读它

JSON.parse(localStorage.getItem("localStorage"))

例子

使用 iframe 在不同域之间共享 localStorage 数据不起作用

Sharing localStorage data between different domains using iframe not working

javascript

postmessage

session-storage

same-origin-policy

local-storage