pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储
如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间

第一次我用的事件是: // window.onbeforeunload = function() {。。。}但是ios移动端是没有任何反应的,也就是不兼容。
第二次我用的是: window.addEventListener('pagehide', function () {....})完美解决。
- onbeforeunload 支持的手机浏览器见 WindowEventHandlers/onbeforeunload
- 对于 Safari 浏览器可以使用
pagehide,详见 Handling Events
window.addEventListener('pagehide', function () {
// localStorage.setItem("selftestid",selftestid);
// localStorage.setItem("remainderlength",remainderlength);
console.log(selftestid)
console.log(remainderlength)
$.ajax({
type: 'post',
url: "...",
type: 'post',
async: false,
data: {
key: key,
id: selftestid,
remainderlength: remainderlength//时间存储后台
},
dataType: 'json',
success: function(result) {
console.log(result);
}
})
// }
});
在这里我最初的思想是放在本地存储中,但是后来一想如果用户在本次操作的网页和下次操作的手机如果不一样,那么是获取不到本地存储的内容的,所以就存在服务器中了
pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储的更多相关文章
- (Android+IOS)我们正在做一个新闻App,做几乎一样的,倾听您的建议 (画画)
(Android+IOS)我们正在做一个新闻App,做几乎一样的,倾听您的建议! 新闻采访是做,前端展示APP界面感觉还不是非常好,还须要改进改进,希望公布(Android和IOS版本号)前听听大家的 ...
- iOS 利用UICollectionView做一个无限循环广告栏
一.效果图 左右丝滑滑动,并且有缩放动画. 二.分析和思路 1. 为什么选择用UICollectionView去做上面的效果? 首先无限效果永远是表现出来的,而不是程序里面创建了无数个view,如何做 ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- cordova使用webrtc与网页端及移动端视频、语音聊天
最近在做一个移动端与移动端.网页端文字.视频.语音聊天的功能.文字聊天使用websocket,在网上很多资料,也没什么难度.但是在视频.语音聊天上遇到了小小的难点.之前一直在找一些SDK想快速开发,例 ...
- java 自制Tomcat Andorid IOS 端 证书
java 自制证书 最近做项目用到Https 需要自制各种证书,Tomcat 用的JKS 格式, Andorid 端使用 BKS 格式, IOS 端使用 P12格式正式, 以及各种证书格式之间的转换. ...
- JS判断android ios系统 PC端和移动端
最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
随机推荐
- python之函数初识
一.函数的初识1.如何定义函数:def 函数名(): 代码... 例如:def my_len(): l = [1, 2, 3, 4] count = 0 for i in l: count += 1 ...
- SD第九届省赛B题 Bullet
Bullet Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description In G ...
- MySQL安装-windows安装
windows下安装MySQL 在windows下面安装MySQL 本文以5.7.17为示例 MySQL下载 官网:https://dev.mysql.com/downloads/mysql/ 本次安 ...
- yii2 redirect重定向
redirect使用方法 $this->redirect(array('/site/contact','id'=>12)); //http://www.kuitao8.com/testwe ...
- jenkins系列之插件配置(二)
第一步:下面来安装nodejs插件 第二步:可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可 我的是已经安装了 第三步: 安装完毕后, ...
- 连接SQL Server数据库
SqlConnection来连接数据库,注意数据库目标的格式. using System.Data.SqlClient;//载入数据库命名空间 namespace WindowsFormsApplic ...
- Linux系统诊断必备技能之二:tcpdump抓包工具详解
一.简述 TcpDump可以将网络中传送的数据包完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.not等逻辑语句来帮助你去掉无用的信息. Linux作为网络服 ...
- 网页三剑客之CSS
1.CSS概述 CSS中文简称层叠样式表(英文全称:Cascading Style Sheets),用来控制页面的表现,即使页面更好看的语言. 2.CSS基本语法和页面引用 2.1 css的定义方法 ...
- [再寄小读者之数学篇](2014-06-23 Hardy 空间、BMO空间与 Triebel-Lizorkin 空间)
$$\bex 0<p<\infty\ra H_p=\dot F^0_{p,2};\quad BMO=\dot F^0_{\infty,2}. \eex$$ see [H. Triebel, ...
- [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.1 媒质中的 Maxwell 方程组
1.媒质的极化 (1) 束缚电荷: 被束缚在原来位置上的电荷. (2) 在电磁场中, 束缚电荷会有一微小的运动, 而产生电偶极矩. 此即称为媒质的极化. (3) 设电极化强度 (单位体积的电偶极矩) ...