利用iframe实现不同域名间共享localStorage/sessionStorage
概要
在实际开发场景中，有时我们会遇到不同域名下实现状态共享的类似需求，我们知道两个不同的域名的localStorage是不能直接互相访问。那么如何在projectA.com中调用projectB.com的localStorage呢，本文手把手带你实现。
实现原理
- 1.在projectA.com的页面中，嵌入一个src为projectB.com的iframe，此时这个iframe里可以调用projectB.com的localStorage。
- 2.用postMessage方法实现页面与iframe之间的通信。
综合1、2便可以实现projectA.com中调用projectB.com的localStorage。
实现demo
我们可以在projectB.com中写一个专门负责共享localStorage的页面，例如叫做share.html，这样可以防止无用的资源加载到iframe中。
以在projectA.com中读取projectB.com中的localStorage的token为例。
projectB.com中share.html，监听projectA.com通过postMessage传来的信息，读取localStorage，然后再使用postMessage方法传给projectA.com的接收者。
在localstorage->projectB目录下新建share.html， 在localstorage->projectA目录下新建project-a.html。
在projectA.com的页面中加入一个src为projectB.com/share.html的iframe。
在projectA.com的页面中加入下面script标签。在页面加载完毕时通过postMessage告诉iframe中监听者，读取token。监听projectB.com传回的token的值并输出。
代码如下:
share.html
project B
This page is for sharing localstorage.
project-a.html
project A
测试demo
全局安装npm install -g http-server，在cmd控制台分别进入projectB和projectA目录运行http-server -c-l启动两个服务。
在浏览器访问，点击获取token按钮测试