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