localStorage的写入和读取,不能跨子域,否则在一些移动端浏览器上,会出现读取不到的情况。

最近开发一个移动端的播放记录功能,在pc端和android版的chrome测试很顺利通过了,但后来进行多平台测试的时候,悲剧发生了。。

掉进localStorage的坑里

android版本UC、iphone及ipad mini版的safari,localStorage跨页面读取不到数据,必须要重启浏览器后才能够正常的读取到数据。

爬出localStorage的坑

首先怀疑的可能是localStorage的访问方式的问题,写入的方式是属性设置localStorage.history而读取是api的方式localStorage.getItem,demo后确认localStorage的三种访问方式都是没有问题的。

思维短路了,开始思考如何规避这个跨页面无法读取的问题,首先想到的是尝试下sessionStorage,浏览器运行期间将数据保存在“session”中,后来发现有着同样的问题。

继续思考能够跨页面保存“大数据”的方式,“灵光”闪现,window.name应该是可以跨页面保存的,试了下各种设备确认这种方案确实可行,但是风险是任何页面都有可能重写掉这个name,甚至会有安全问题。

用极简的demo测试,发现这些有问题的浏览器对localStorage的支持是没问题的。在几乎要放弃的时候,同事跑过来说,将某个文件提前到head里,可以正常的读取数据,这是才意识到播放器的前置代码里没有显示的设置document.domain,导致读取和设置localStorage在不同的domain下面发生的。

在写入localStorage的页面方法之前没有显示的设置document.domain,默认的值为 labs.wxnet.me,但是在读取的页面,读取数据之前显示的设置了document.domain为根域wxnet.me

将问题环境抽象为demo

写入数据的页面 http://labs.wxnet.me/labs/writelocalstorage.html

//document.domain默认值为子域 labs.wxnet.me
localStorage['k'] = '{"a":"1"}';
document.domain = "wxnet.me";

读取数据的页面 http://labs.wxnet.me/labs/readlocalstorage.html

document.domain = "wxnet.me";
alert(localStorage['k']);

  

解决方案

读取和设置localStorage的页面必须要统一document.domain,要么全部不显示设置或统一设置为根域。

设置页面:

document.domain = "wxnet.me";
localStorage['k'] = '{"a":"1"}';

读取页面:

document.domain = "wxnet.me";
alert(localStorage['k']);

  

思考

不同的移动版浏览器在处理子域方式不同,iphone、ipad mini子域下写入,主域下是无法读取的,重启浏览器后忽略掉这个安全策略,可以读到数据。但是ipad、pc版的浏览器没有发现这个问题。

HTML5 localStorage与document.domain设置问题的更多相关文章

  1. 跨域cors方法(jsonp,document.domain,document.name)及iframe性质

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. 跨域问题实践总结! 上(JSONP/document.domain/window.name)

    1. JSONP 首先要介绍的跨域方法必然是 JSONP. 现在你想要获取其他网站上的 JavaScript 脚本,你非常高兴的使用 XMLHttpRequest 对象来获取.但是浏览器一点儿也不配合 ...

  3. js设置document.domain实现跨域

    document.domain 只能实现跨子域的问题 如:xxx.com/a.html 和aaa.xxx.com/b.html 或:bbb,xxx.com/c.html 和ccc.xxx.com/d. ...

  4. 设置document.domain实现js跨域注意点

    转自:http://www.cnblogs.com/fsjohnhuang/archive/2011/12/07/2279554.html document.domain 用来得到当前网页的域名.比如 ...

  5. [跨域]js设置document.domain实现跨域

    document.domain用来得到当前网页的域名.比如在地址栏里输入: 代码如下: javascript:alert(document.domain); //www.jb51.net 我们也可以给 ...

  6. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  7. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  8. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  9. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...

随机推荐

  1. 泛型&&枚举

    1.枚举类型 JDk1.5中新增了枚举类型,可以使用该功能取代以往定义常量的方式,同时枚举类型还赋予程序在编译时进行检查的功能. 1.1 使用枚举类型设置常量 以往设置常量,通常将常量放在接口中(fi ...

  2. 《JSON笔记之二》----封装JSONUtil

    许多java开发人员对于fastjson再也熟悉不过了,这是alibaba开源的依赖,使用fastjson可以使我们很容易的把请求json串转换成为我们所需要的对象.list.map等对象格式,对于开 ...

  3. zip压缩工具,unzip解压缩工具

    zip压缩工具,unzip解压缩工具=================== [root@aminglinux tmp]# yum install -y zip[root@aminglinux tmp] ...

  4. Uboot S3C2440 BL1 的流程

    1.   reset 中断向量表 2. 进入reset (1) 设置svc32 模式 (2) flash  I/D caches (3)disable  MMU 和 cache (4)2440 没有o ...

  5. Pagehelper介绍

    本文引自:https://my.oschina.net/zudajun/blog/745232 摘要: com.github.pagehelper.PageHelper是一款好用的开源免费的Mybat ...

  6. JAVA / MySql 编程——第八章 DAO 模式

    1.        数据持久化:将程序中的数据在瞬时状态和持久状态间转换的机制即为数据持久化: 2.        持久化的实现方式:数据库.普通文件.XML文件: 3.        JDBC封装: ...

  7. python__高级 : GC垃圾回收相关

    python的垃圾回收机制是以引用计数为主,加上标记-清除,分代收集等辅助方式组成的,如果想打开gc功能,需要 import gc 模块 ,然后 gc.enable() 就打开了这个功能,关闭是 gc ...

  8. php-5.6.26源代码 - opcode处理器,“函数调用opcode”处理器,如何调用扩展模块的函数

    // opcode处理器 --- ZEND_DO_FCALL_SPEC_CONST_HANDLER实现在 php-5.6.26\Zend\zend_vm_execute.h static int ZE ...

  9. 安装python虚拟运行环境,linux下轻松切换python2和python3

    一.查询系统采用的python版本 $ python --version Python 3.7.3 系统采用的python版本为3.7.3 以下查询py3和py2的目录: $ which python ...

  10. The Extinction of Some Languages【一些语言的消失】

    The Extinction of Some Languages Languages have been coming and going for thousands of years, 语言的产生和 ...