关于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。慎用!
解决办法:(2019年了,哈哈!! 来补充下解决办法,有用的话支持下我哦^_^ ^_^ ^_^,下面的广告也是今天补的,不关注我的广告,给我点个赞也非常谢谢的!^_^)
利用localStorage,和window.name来实现:
window.name属性:页面刷新是不会被重置的
A.html页面
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script>
- //这清除一定要在页头,如果是新进入的页面就清除上次传存储的值
- if(window.name === ''){
- localStorage.removeItem("aUser");
- window.name = 'isReload';
- }
- </script>
- </head>
- <body>
- <script>
- //设置值
- localStorage.setItem("aUser","aaa");
- </script>
- </body>
- </html>
B页面
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script>
- //这清除一定要在页头,如果是新进入的页面就清除上次传存储的值
- if(window.name === ''){
- localStorage.removeItem("bUser");
- window.name = 'isReload';
- }
- //判断如果A页面有存储,那就取出来过渡到B页面来
- let a = localStorage.getItem('aUser');
- if(a){
- localStorage.setItem('bUser',a);
- }
- </script>
- </head>
- <body>
- <script>
- //获取值
- localStorage.getItem("bUser"); //aaa
- </script>
- </body>
- </html>
关于sessionStorage的移动端兼容问题的更多相关文章
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- ReactJs移动端兼容问题汇总
汽车H5使用ReactJs问题汇总 Q:安卓4.4webview显示空白? A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is und ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- vue e.path 移动端兼容
作用 e.path 用来获取点击元素及以上所有父元素的一个数组 问题 当在移动端会有获取不到e.path的问题 不兼容 解决 let path = event.path || (event.compo ...
- 移动端—— 兼容PC端,移动端的点击事件
移动设备上不支持鼠标事件,好在webkit内核的移动浏览器支持 touch 事件,所以触摸事件是移动应用中所必须的.touchstart.touchmove.touchend事件可以类比于moused ...
- 年度账单h5 移动端兼容问题以及优化建议(vue)
定时器 vue实例中定义timer多余,创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护:建议使用this.$once('hook:beforeDestory ...
- vue--移动端兼容问题
click的300ms延迟: 引入fastclick库来解决 输入命令 npm install fastclick 在main.js导入 import Vue from 'vue' import Ap ...
- 移动端兼容 - faskclick.js
fasckclick为解决移动端300ms延迟而生 github地址为:https://github.com/ftlabs/fastclick 使用方法: 1. 原生使用(window.onload或 ...
- pc端兼容IE9及以上版本
最近业务部门反映我们商城的兼容性不是很好,尤其是在IE浏览器上,经过调研,我们决定对IE9及以上版本的IE内核浏览器进行主流程测试,发现有哪些功能在IE9上不兼容 一.CSS兼容性 如下图所示 使用了 ...
随机推荐
- 01--数据库MySQL:【数据库DB】和【数据库管理系统DBMS】 简介
1.数据库DB 数据库:DB(DataBase) 按照一定规则存储在计算机的内部存储设备上被各种用户或者应用共享的数据集合 2.数据库管理系统DBMS 1)数据库管理系统DBMS:DBMS(DataB ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- windows embedded compact 2013 正版免费下载
不知道wince2013是不是真的免费了,不过可以试一下! 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=39268 你仍然 ...
- Android上解析Json格式数据
package com.practice.json; import org.json.JSONArray; import org.json.JSONException; import org.json ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- JDBC加载数据库驱动的方式
JDBC作为数据库访问的规范接口,其中只是定义一些接口.具体的实现是由各个数据库厂商来完成. 一.重要的接口: 1.public interface Driver 每个驱动程序类必须实现的接口.Jav ...
- Ubuntu安装搜狗拼音和金山快盘
搜狗拼音和金山快盘是UbuntuKylin中的特色中文应用,通过下述方法在Ubuntu或UbuntuKylin中安装. 一.更新Fcitx 1.由于 Ubuntu 12.04自带的 小企鹅输入法Fci ...
- java加密算法入门(三)-非对称加密详解
1.简单介绍 这几天一直在看非对称的加密,相比之前的两篇内容,这次看了两倍多的时间还云里雾里的,所以这篇文章相对之前的两篇,概念性的东西多了些,另外是代码的每一步我都做了介绍,方便自己以后翻阅,也方便 ...
- MongoDB-配置翻译
Configuration File(配置文件) File Format(文件格式) Use the Configuration File(使用配置文件) Core Options(核心设置) sys ...
- Java NIO 学习笔记五 缓冲区补充
1.缓冲区分配 方法 以 ByteBuffer 为例 (1)使用静态方法 ByteBuffer buffer = ByteBuffer.allocate( 500 ); allocate() 方法 ...