不同域名之间共享localStorage/sessionStorage

问题

两个不同的域名的localStorage不能直接互相访问。那么如何在aaa.com中如何调用bbb.com的localStorage?

实现原理

1.在aaa.com的页面中,在页面中嵌入一个src为bbb.comiframe,此时这个iframe里可以调用bbb.com的localStorage。
2.用postMessage方法实现页面与iframe之间的通信。
综合1、2便可以实现aaa.com中调用bbb.com的localStorage。

优化iframe

我们可以在bbb.com中写一个专门负责共享localStorage的页面,例如叫做page1.html,这样可以防止无用的资源加载到iframe中。

示例

以在aaa.com中读取bbb.com中的localStorage的item1为例,写同理:
bbb.compage1.html,监听aaa.com通过postMessage传来的信息,读取localStorage,然后再使用postMessage方法传给aaa.com的接收者。

<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">  
    window.addEventListener('message', function(event) {
        if (event.origin === 'https://aaa.com') {
          const { key } = event.data;
          const value = localStorage.getItem(key);
          event.source.postMessage({wallets: wallets}, event.origin);
        }
    }, false);
</script>
</head>
<body>
  This page is for sharing localstorage.
</body>
</html>

aaa.com的页面中加入一个src为bbb.com/page1.html隐藏的iframe

<iframe id="bbb-iframe" src="https://bbb.com/page1.html" style="display:none;"></iframe>

aaa.com的页面中加入下面script标签。在页面加载完毕时通过postMessage告诉iframe中监听者,读取item1。监听bbb.com传回的item1的值并输出。

<script type="text/javascript">  
  window.onload = function() {  
      const bbbIframe = document.getElementById('bbb-iframe');
      bbbIframe.contentWindow.postMessage({key: 'item1'}, 'https://bbb.com');
  }
  window.addEventListener('message', function(event) {
      if (event.origin === 'https://bbb.com') {
          console.log(event.data);
      }
  }, false);
</script>

推荐阅读更多精彩内容

  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 537评论 0 3
  • 元素会创建包含另外一个文档的内联框架(即行内框架); 一、align 属性(不赞成) align属性规定ifram...
    puxiaotaoc阅读 17,767评论 0 14
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 877评论 0 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 716评论 0 2
  • 读给教师的建议24 亲爱的同事们,今天我们谈谈学生的智力生活,这是一个和学校的全部工作都有联系的问题。如果我们在教...
    仙人掌四小王文亚阅读 424评论 0 1
  • 如果你决定来创业,来做这个生意,想要在这个生意事业里取得成功。必须解决这6个问题,是必须的。如果解决不了这六个问题...
    大秦系统阅读 96评论 0 0