利用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缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面

最新文章

热门文章