localStorage 如何跨域通信？-CFANZ编程社区

cookie 跨域主要记住一个单词，如下：

因为要跨域所以我们需要两台服务器，就直接使用 NodeJs 来调试了其中一个服务器代码如下：

const http = require("http");
const { readFile } = require("fs");



const server = http.createServer(async (req,res) => {
    console.log(req.url);
    if(req.url === "/index"){
        const result = await new Promise((resolve,reject)=>{
            readFile("./index.html",(err,res)=>{
                resolve(res.toString());
            }); 
        })
        res.end(result);
    }else{
        res.end("err");
    }
})


server.listen(3000,function(){
    console.log("服务器成功启动！");
});

现在为了跨域在重新启动一个服务器，只需要端口号不同就行了。代码如下：

const http = require("http");
const { readFile } = require("fs");



const server = http.createServer(async (req,res) => {
    console.log(req.url);
    if(req.url === "/search"){
        const result = await new Promise((resolve,reject)=>{
            readFile("./search.html",(err,res)=>{
                resolve(res.toString());
            }); 
        })
        res.end(result);
    }else{
        res.end("err");
    }
})


server.listen(8888,function(){
    console.log("服务器成功启动！");
});

好了，我们已经启动两个服务器了，现在开始了解下 localStorage 跨域请求的步骤。

在 index 使用 iframe 页面嵌入 search 页面
使用 postMessage 来进行跨页面通信
在 search 页面添加 message 事件进行监听 postMessage 发送过来的信息

页面通信详细版：

现在看看 index.html 文件的内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <h1>index</h1>
    <button onclick="GetState()">点击</button>
    <br />
    <!-- iframe嵌入网页 -->
    <iframe src="http://127.0.0.1:8888/search" id="myFrame" width="600" height="400px"></iframe>
    <script>
        localStorage.setItem("pageName","index");
        function GetState () {
            var frame = document.getElementById ("myFrame");
            // send the 'getstate' message to the frame window
            // 要发送的消息
            var message = "getstate";
            // postMessage发送消息
            if (frame.contentWindow.postMessage) {
                frame.contentWindow.postMessage (message, "http://127.0.0.1:8888/search");
            }else {
                alert ("Your browser does not support the postMessage method!");
            }
        }

        // 接受返回消息
        Init();
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);
                }
            }
        };

        function OnMessage (event) {
            var message = event.data;
            // 发送回来的消息
            console.log(message);
        };
    </script>
</body>

</html>

search.index 文件的内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search</title>
</head>
<body>
    <h1>search</h1>
    <script>
        localStorage.setItem("pageName","search");

        window.addEventListener('message',function(event) {
            // 指定接受固定网页内容
            if(event.origin !== 'http://127.0.0.1:3000')return;
            console.log('message received:  ' + event.data);
            // 往原网页发送返回消息
            event.source.postMessage('我是发送回去的内容',event.origin);
        },false);
    </script>
</body>
</html>

当点击按钮，控制台打印出：

message received:  getstate
我是发送回去的内容

除此之外跨文档通信还有一个 API 及MessageChannel，使用方法如下：

        var channel = new MessageChannel();
        var port1 = channel.port1;
        var port2 = channel.port2;
        port1.onmessage = function(event) {
            console.log("port1收到来自port2的数据：" + event.data);
        }
        port2.onmessage = function(event) {
            console.log("port2收到来自port1的数据：" + event.data);
        }

        port1.postMessage("发送给port2");
        port2.postMessage("发送给port1");

简单来讲就是一个通道两个入口，如图：