最近做一个项目,改动到了两个页面(A,B):在A页面(aa.example.com/a.html)往localStorage写一个key,然后在稍候的B页面(bb.example.com/b.html)读出来。结果是写的时候成功了,在A页面也读出来了,跑到B页面,localStorage却是空的!

20130117160735

别急,待俺掐指一算……嗯,子域不同,localStorage应该也是不一样的。在A页面的逻辑完成的时候,跳转到bb.example.com/a.html 进行设置key的话,写key和读取key都是同一个域了。

20130117161036

结果……啊,我要崩溃,还是读不出来!但是t它(A,B)的上一个版本是可以的,为虾米呢?

moreGoogle N久,没谷着,没办法了,一行一行找!

然后……这样……那样……接着……

20130117161616

5555……别拉着我,我要去砍死写这行代码的那个家伙!(喂喂,真不拉着我呀)

重新唤回A页面,加上document.domain=“example.com”;然后,写!跳到B页面,OMG,总算可以了,呼~

说明:Sorry,后续的试验证明localStorage是没法跨域读取的,子域也不行,后面重新验证的时候发现a.html和b.html都在同一个子域,误人子弟了,55555~~

后话:话说用localStorage也蛮长时间了,只是从来没想过localStorage会跟cookie一样受到跨域的限制,会被document.domain影响,嗯,这就是学艺不精还不认真看文档的后果……

嗯,附上W3C的说明一份,不用钱的。^_^

4.3.1 Security

User agents must throw a SecurityError exception whenever any of the members of a [Storage](http://www.w3.org/TR/webstorage/#storage-0) object originally returned by the [localStorage](http://www.w3.org/TR/webstorage/#dom-localstorage) attribute are accessed by scripts whose effective script origin is not thesame as the origin of the Document of the Window object on which the [localStorage](http://www.w3.org/TR/webstorage/#dom-localstorage) attribute was accessed.

This means [Storage](http://www.w3.org/TR/webstorage/#storage-0) objects are neutered when the document.domain attribute is used.

Comments
Write a Comment
  • koala reply

    多tab的跨域通信有啥方法?

  • iAzrael reply

    @koala 这个可以用flash中转, 或者用iframe来代理

  • 郭小铭 reply

    html5 中有个globalStorage 对象可以跨域,但是很多浏览器不支持。

  • iAzrael reply

    @郭小铭 长见识了,还真的没了解过喔

  • Dreamlu reply

    在github上发现了一个库,使用了一个crossd_iframe.html充当信使实现的跨域!<br><a href='https://github.com/juanrmn/localStorage-tools' rel='nofollow noopener' title=''></a>

  • Dreamlu reply

    <a href='https://github.com/juanrmn/localStorage-tools' rel='nofollow noopener'>localStorage-tools</a>

  • iAzrael reply

    @Dreamlu 谢谢分享, 了解下

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟