type
status
date
slug
summary
tags
category
icon
password
前言
很多项目需要通过cookie来共享一些数据，其中有两个大cookie总长度高达1000，大大增加了服务器开销； 考虑使用本地存储来优化；然而各个项目都在不同的子域名下，需要支持跨域，所以暂定使用iframe方案来处理；
设计思路
- 通过iframe加载一个特定域名下的proxy.html，在这个html内部保存数据；
- 其它项目通过引用一个storageProxy.js，动态注入这个iframe，然后通过window.postMessage来交换数据；
代理页面
- 初始化时监听window的message，用于处理父页面发送过来的消息；
- 在message的处理函数中过滤来源域名以及事件类型；
- 处理对应的事件类型后选择是否把处理结果传递回去，通常只有取数据需要返回，其它假设为一定成功；
代理js
- 注入iframe到当前页面；
- 提供事件处理函数用于快捷调用；
存在的缺陷
- 因为iframe跨域，无法监听加载完成事件；
- iframe的加载受页面资源加载的影响，因此无法在初始化时使用；
- iframe的初始化和存取数据的调用都是以回调的形式实现的，用起来不够方便；
优化方案（对应上述缺陷）
- iframe加载成功后需要发送消息给父页面，告知自己加载完成；
- 因为加载完成时间不可控，在页面初始化时，需要把原有逻辑调整为以更新的形式处理，而不是waiting数据；
- 需要把现有的回调，使用语法糖包装为promise或者async await（考虑兼容性，只能以callback的形式提供，要在各个项目内部封装）, 减少原有同步逻辑的调整；
代码实现proxy.html
代码实现storageProxy.js
测试代码
其它
- 后边在网上搜了下同类方案，发现了postmate，建议使用此库；