关于sessionStorage的移动端兼容问题

最近在开发移动端项目时,需要用到的本地存储的地方不少。都是一些只要记住当前打开窗口的用户数据就行,所以我选择用的sessionStorage。使用场景如下:

A.html页面需要记录一条数据{a:1,b:2};

sessionStorage.setItem("data","{a:1,b:2}");

B.html页面取出使用;

sessionStorage.getItem("data"); // 获取结果为null

问题:如果项目不是单页面复应用,AB是两个html文件,需要跳转href的。我们会发现有些Andiron系统的浏览器在B页获取是到的结果是null (如:vivo手机自带的世界之窗浏览器)。

经过分析,其实这并不是这个浏览器不支持sessionStorage,因为你还是能获取到sessionStorage这个对象的。而是因为sessionStorage是一个当前窗口的数据存储格式,有些浏览器在跳转新页面的时候他系统是打开了一个新的webView,把原来的关了,也就相当于我们在浏览器打开了一个新窗口。这样他就跟我们的sessionStorage原理冲突了,在新页面当然就获取不到咯。 所以建议大家做移动端的时候如果不是单页面复应用的的项目最好不要使用sessionStorage。慎用!

时间: 2024-10-11 03:53:01

关于sessionStorage的移动端兼容问题的相关文章

【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转

前言 javascript事件基础 事件捕获/冒泡 事件对象 事件模拟 移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题 结论 zepto事件机制 注册/注销事件 zepto模拟tap事件 tap事件的问题一览 点透问题 fastclick思想提升点击响应 实现原理 鬼点击 ios与android鼠标事件差异 事件捕获解决鬼点击 结语 前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜

video移动端兼容问题

video在各版本ios和安卓上面表现形式都有所区别,为了解决这一问题我在网上找了许多方法,看见甚至有采取重写控件的方式来解决,这里亲自尝试了一下,提供一个简单而又能解决大部分移动端兼容的方式: 给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" <video id="mpVideo&q

移动端兼容问题注意事项

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页有300ms延迟,有时会造成按钮点击延迟或者点击失效. 苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,发布IOS系统搭载的safari.如:在手机上用浏览器打开一个PC的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体.图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态. 双击缩放:用

web移动端兼容

移动端总结和手机兼容问题 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> (部分安卓手机的UC浏览器写完以后还是可以放大缩小) 忽略将页面中的数字识别为电话号码 <meta name="f

服务端兼容多个不同APP版本

1.实现目标 发布第N版APP,不影响N版本之前APP的正常使用,不强制用户升级APP版本,兼容多个版本的APP的正常使用. 2.解决思路 服务端维护不同版本APP的api(例如版本参数 v1.v2.v3-),根据手机端传递的URL及版本信息,动态调用对应的api. 3.常见的方案 3.1 常见的URL请求传递版本信息的4中方式 url+版本参数: www.xxx.com/api.xxx?version=v1 www.xxx.com/sys/user/getUserByName?version=

select标签移动端兼容

select选中事件用change,(用click会执行两次): select标签对移动端的兼容: .custom-selectselect{ width:100%; margin:0; background:none; border:1px solid transparent; outline: none;/* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -m

移动端兼容小计

1.页面布局: 由于手机型号多样导致页面高宽比非常多,在制作上会有出现不同手机在同一套css下面显示效果不尽如人意,所以需要进行兼容性处理. 方式很多比如直接套用类似bootstrap类的框架,可以使用rem等相对单位.这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理. 100vw为整个屏幕的宽度,100vh为屏幕高度,其实和百分比的做法很相似,只不过把计算的值单位换成vw或者vh. 2.碰到的兼容问题,主要是ios: a.ios: optgroup使用会出现select的选择文本靠

淘宝移动端兼容

js控制分辨率等比例缩放 var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 淘宝布局的第二个要点,就是html元素

移动端兼容问题----总结

1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> (部分安卓手机的UC浏览器写完以后还是可以放大缩小). 2.忽略将页面中的数字识别为电话号码 <meta name="format-de