zoukankan      html  css  js  c++  java
  • 利用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");
  • 相关阅读:
    vue 基础补充
    正则
    vue 指令
    函数式编程FP 初探
    .? ?? es2020
    vue alfont scss
    网络安全靶场通关指南
    Java 程序设计——站内短信系统
    Java 程序设计——登录系统
    动态规划法解找零钱问题
  • 原文地址:https://www.cnblogs.com/zimengxiyu/p/9846883.html
Copyright © 2011-2022 走看看