无论数据存储在 localStorage 还是 sessionStorage ,它们都特定于页面的协议。
由于localStorage
是基于当前访问源(origin)的本地存储空间,所以当我们在 a.jakeyu.top
中存储一段数据,并想要在 b.jakeyu.top
中读取数据的时候是无法取到的。
最近遇到这样的需求,考虑过 cookie 方案,但是可能存储大量的数据,cookie 不可行。最终我们使用iframe
来实现,我觉得这是一个很有趣的方法。
思路
a.jakeyu.top
和 b.jakeyu.top
通过 iframe
加载同一个域名的页面,并使用 postMessage 和 iframe
中的页面进行通信,这样就可以实现跨域名存取 localStorage。
缺点是 postMessage
是基于回调的,所以所有 api 都是异步的。不过我们有 promise
,可以让使用方式优雅一些。
实现
父级页面
创建 iframe
1 | function createIframe() { |
核心 Class
1 | class localStorage { |
iframe 页面
iframe 页面只需要通过 postMessage 和父级页面进行通信,所以并不需要 ui。
ready
页面加载完成时,需要通知父页面,并执行 before 栈中的函数。
1 | window.parent.postMessage( |
监听消息
1 | function receiveMessage(event) { |
使用
在 a.jekeyu.top
中存储数据
1 | new localStorage().setItem('name', 'jake') |
在 b.jekeyu.top
中存储数据
1 | const name = await new localStorage().getItem('name') |
如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理