利用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");

 

转载于:https://www.cnblogs.com/zimengxiyu/p/9846883.html