Localstorage跨子域

Home文章
 简介:遇到了cookie丢失问题,因为可以删除影响cookie的东西太多,没法验证。故曲线救国~

经远程查看cookie丢失,但是localstorage还在,localstorage不能跨域是硬伤啊,查看下前人怎么搞的。

同源策略:

通常,不同页面上的脚本只在这种情况下被允许互相访问,当且仅当执行它们的页面所处的位置使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的主机(两个页面的 document.domain 的值相同)。

window.postMessage 是一个用于安全的使用跨源通信的方法。

localStorage 里面的数据没有过期时间(expiration time),而存储在 sessionStorage 里面的数据会在浏览器会话(browsing session)结束时被清除,即浏览器关闭时。

 

解决方案比较明朗了,让大部分人用cookie ,少数丢失的人,跨域用localstorage吧

情景:

news.qq.com,sports.qq.com,  ent.qq.com 等等20个子域需要跨域用localstorage

0、所有都设置 document.domain = 'qq.com';

1、在qq.com下创建一个页面get.html用作中转站

2、假设在ent.qq.com下使用localstorage,在此页面利用iframe发送postMessage到get.html

3、get.html操作qq.com 的 localstorage postMessage返回给ent.qq.com

4、所有频道都操作qq.com下的localstorage

共享完成

 

珍贵的经验

如果初始加载页面就直接访问,可能有一些困扰。

a.html:74 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://www.qq.com') does not match the recipient window's origin ('http://dev.qq.com').

这是因为iframe还未加载完就postmessage,所以会报错,可以两边的代码都设置问load完再搞

或者:

 frame.onload = function () {
                //console.log('iframe onload end');
                self.load();
            };

 

 

参考地址:

http://annn.me/cross-domain-local-storage/

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

http://stackoverflow.com/questions/12641146/problems-with-window-postmessage-on-chrome

http://www.5iwow.com/article-4244-4.html

 

 

 



评论
Login