利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面
昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面。这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会话中的数据,窗口关闭后,数据就会消失。是一种会话级别的存储。
sessionStorage:
sessionStorage.setItem("key","1");设置属性
sessionStorage.getItem("key");获取设置的属性
这个原理是第一次先跳转a页,a页设置 sessionStorage.setItem("key","1");当你再次进入index页面时在点击按钮获取设置的属性并进行判断决定页面跳转。
在点击按钮index页面也写上这样的js判断
<a href="javaScript:">点击</a> <script>
var btn=document.querySelector("a");
btn.onclick=function(){
console.log(sessionStorage.getItem("key"));
if(sessionStorage.getItem("key")=="1"){
location.href="a.html"
}else{
location.href=b.html"
}
}
</script>
a目标页
sessionStorage.setItem("key","1");
利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面的更多相关文章
- 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- H5 缓存机制解析
在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面在浏览器里打开还是没 ...
- php利用ob缓存机制实现页面静态化方法全解
首先介绍一下php中ob缓存常用到的几个常用函数 ob_start():开启缓存机制 ob_get_contents():获取ob缓存中的内容 ob_clean()清除ob缓存中的内容,但不关闭缓存 ...
- H5缓存机制学习记录
参考文章:http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=404724239&idx=1&sn=e0a2887f9ff ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
随机推荐
- java基础: synchronized与Lock的区别
主要区别 1. 锁机制不一样:synchronized是java内置关键字,是在JVM层面实现的,系统会监控锁的释放与否,lock是JDK代码实现的,需要手动释放,在finally块中释放.可以采用非 ...
- JVM 线上故障排查基本操作 (转)
前言 对于后端程序员,特别是 Java 程序员来讲,排查线上问题是不可避免的.各种 CPU 飚高,内存溢出,频繁 GC 等等,这些都是令人头疼的问题.楼主同样也遇到过这些问题,那么,遇到这些问题该如何 ...
- Ansible 常用模块详解
经过前面的介绍,我们已经熟悉了 Ansible 的一些常识性的东西和如何编译安装Ansible,从本章开始我们将全面介绍 Ansible 的各种生产常用模块,这些也是我们使用 Ansible 的过程中 ...
- 最新省市区地区数据sql版本(2019年1月)
版本 统计标准2017版 来源 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/ 建表 CREATE TABLE `area` ( `id` varc ...
- [Next] 六.next的优化
导出 html 并开启服务 我们将 pages 下页面导出为静态 HTML 页面.首先,next.config.js 在应用程序的根目录中创建一个名为的文件,并添加以下内容 exportPathMap ...
- N1试卷常考词汇总结
免れる まぬがれる 免去,幸免 軽率 けいそつ 轻率,草率 捩れる ねじれる 拧劲儿,扭歪,弯曲 裂ける さける 裂开,破裂 避ける さける 躲避,避开 つまむ 挟,捏,掐 追及 ついきゅう 追上.追 ...
- docker下进去mysql 编写语句
设置密码可使用 docker exec -it mysql01 bash --mysql01:数据库名字 mysql -u root -p ALTER USER 'root'@'%' I ...
- 2019.9.20使用kali中的metasploi获取windows 的权限
1 kali 基于debin的数字取证系统,上面集成了很多渗透测试工具,其前身是bt5r3(bractrack) 其中Metasploit是一个综合利用工具,极大提高攻击者渗透效率,使用ruby开发的 ...
- Linux编译阻塞型驱动遇到'TASK_NORMAL' undeclared (first use in this function)问题解决办法
http://blog.csdn.net/qq_16405157/article/details/49281793
- 配置Nexus为maven的私服
1.配置Nexus为maven的私服 第一种方式:在项目的POM中如下配置 <repositories> <repository> <id>nexus_public ...