localstorage浏览器标签页跨域数据交互解决方案

程序员文章站 2022-07-10 18:07:10

...

最近做个项目，需要两个不同域名的标签页能共享数据，最开始用的是最直接的方式直接用POST或GET方式发送数据，让服务器中转一下。后来又觉得只要本地的两个浏览器标签页能够交换数据就行，何必绕路去服务器那绕一圈回来，又耽误时间又没必要，搞技术嘛就是要有追求，要尝试各种可能。现代浏览器因为安全策略问题是不允许浏览器写硬盘上的文件的，读是可以的，比如读的json文件读个txt文件啥的，实在要写也行，写入文件后会把写入修改后的文件作为一个下载项下载保存。这就不是鄙人想要的效果了，鄙人只是想弄一个共享区域让两个不同域名下的网站能交互数据。一开始试着用cookie，后来发现原来不同域名不能读其他域名下的cookie，犯基础错误了。不死心继续到网上搜，最后在简书搜到的解决方案是用<iframe></iframe>标签引入想要跨域通信的页面，比如主域名是

http://localhost:8080

想要交互数据的页面是：

http://www.gebiqu.com/

在http://localhost:8080页面中用<iframe src="http://www.gebiqu.com/" frameborder="0"></iframe>引入页面进来，然后用postMessage()，方法向引用进来的页面发送一个系统消息。postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。

在http://www.gebiqu.com/中嵌入代码接收发送过来的消息，但这个消息只能在http://localhost:8080页面中相应，不是说好了要实现浏览器标签页跨域数据交互的吗？这时候localstorage这个东西就登场了，localstorage这个类似cookie，也和cookie一样只能在同域名下访问，比如http://localhost:8080/lala可以访问http://localhost:8080用localstorage存储下的数据，跨域访问http://www.gebiqu.com/下存储的localstorage依旧是不行的。

现在http://localhost:8080页面中引入的http://www.gebiqu.com/已经响应了鄙人用postMessage()发送的消息了，那么直接在本页面引用的http://www.gebiqu.com/里用localstorage存储数据，然后在另一个浏览器标签中读取http://localhost:8080页面中嵌入的http://www.gebiqu.com/写入的localstorage数据就实现了http://localhost:8080跨域和http://www.gebiqu.com/交互数据的目的了。

localstorage浏览器标签页跨域数据交互解决方案

其实这个方案也可以用cookie替代localstorage，只不过cookie一个域下只能存储4k的内容，而localstorage可以存储最多5M的内容，5M对于交互数据绝大多数情况下是足够了，而cookie的最大4k就显得实在太小。

页面A的代码：

window.onload = function(){

//http://localhost:8080主页面加载完后还需要等待引入的页面加载完成再执行，不然会出错，延迟3秒等待引入页面加载完成

    setTimeout(() => {
      console.log("春哥纯爷们！");
      //在页面加载完成后主页面向iframe发送请求
      window.frames[0].postMessage("春哥", "http://www.gebiqu.com");

      // 主页面监听message事件,
      window.addEventListener(
        "message",
        function(e) {
          var data = e.data;
          
          console.log("第47行：", data);
        },
        false
      );
    }, 3000);


}

页面B的代码：

window.onload = function(){

   window.addEventListener('message',
function(e) {
    if (e.source != window.parent) {
        return;
    }
    console.log('传过来的数据：', e.data);
    localStorage.setItem('task', e.data);
    window.parent.postMessage('人民好兄弟，父亲好儿子。', '*');
},
false);
var person = localStorage.getItem("task");
    console.log("读取出的数据：",person);
}

#localStorage的一些方法：

#添加键值对： setItem(key,value);
#获取键值对： getItem(key);
#删除键值对： removeItem(key);
#清除所有键值对： clear();
#获取属性名称（键名称）： key(index);
#获取键值对的数量： length;

#localStorage 的存取方式

localStorage.age = 88; // 用localStorage属性的方式来添加条目
localStorage.setItem("animal","cat"); // 推荐使用setItem的方式存储一个名为animal，值为cat的数据
var animal = localStorage.getItem("animal"); //读取本地存储中名为animal的数据，并赋值给变量animal
console.log(animal);
localStorage.removeItem("animal"); //删除单条数据
localStorage.clear(); //清除所有数据

参考资料：

https://www.jianshu.com/p/e86d92aeae69

https://blog.csdn.net/chituZip/article/details/82350798