今天碰到的问题
两个页面原来都在一个站点 a.com
现在业务拆分,需要把一部分重要的业务放在b.com
但是b.com 需要每次a.com登入登出信息。因为跨域不能调用localStorage等。
想出的解决方案:
每次a.com登入登出时候,新建iframe,src设置一个 b.com 域下“中间页”加入参数并且接收存储到localStorage.代码如下
a.com
var iframe = document.createElement('iframe.html'); iframe.src = 'b.com/info?info=111';
b.com/info.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body>
//此页面尽可能简洁,减少手机游览器iframe的开销 <script type="text/javascript"> var href = location.href; var index = href.indexOf("?"); var paramsStr = href.substr(index + 1); var temp = paramsStr.split('='); if (temp[0] == 'info') { localStorage.setItem("INFO", temp[1]); } </script> </body> </html>
这样就完美解决了问题。
测试结果:
Android上:UC游览器,qq游览器,chrome,FF 全部通过
IOS:UC通过。但是Safari不通过。
关于Safari不通过,调了一会,发现居然不能用 localStorage!!!(我想Safari没那么弱吧,都是webkit内核,行为不一样)。
报错:"QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."
谷歌之,原来别人也碰到过。
原文:https://github.com/marcuswestin/store.js/issues/42
发现,游览器还有 private browsing mode(隐私/私密/无痕游览模式,各种翻译不同) 一说。
在这个模式下面,将会禁止一些特性,特别是会留缓存写硬盘的事件,比如 history, localstorage, sessionstorage。
各种游览器开启方式:http://browsers.about.com/od/faq/tp/Private-Browsing.htm
有想过用 cookie取代,但是很有肯能有人禁cookie(事实上还有人禁js)。
所以不能两全其美,暂时先用这个方案,有更好的方案就会替代之(//TODO,呵呵)。