显示页面index.html
<body>
<h3>index.html</h3>
<div class="welcome">
<a href="login.html">请登录</a>
</div>
<script>
// 获取登录判断条件
var uname=sessionStorage.getItem("uname");
if(uname){
var welcome=document.querySelector(".welcome");
var html=`欢迎回来${uname}`;
html+=`<a href="loginout.html">退出</a>`;
welcome.innerHTML=html;
}
</script>
</body>
登录页面 login.html
<body>
<h3>login.html</h3>
<form action="#">
用户名:<input type="text" id="uname">
密码:<input type="password">
<br>
<input type="button" id="btn" value="登录">
</form>
<script>
// 获取按钮用户名
// var btn=document.getElementById("btn");
// var name=document.getElementById("uname");
// 为按钮绑定点击事件
btn.onclick=function(){
// 将用户名保存到sessionStorage
sessionStorage.setItem("uname",uname.value);
// 3秒后跳转首页
alert("登录成功,3秒后跳转首页");
setTimeout(function(){
location.href="index.html";
},3000);
}
</script>
</body>
注销页面 loginout.html
<body>
<h3>loginout.html</h3>
<script>
sessionStorage.removeItem("uname");
alert("退出成功")
setTimeout(function(){
location.href="index.html";
},3000)
</script>
</body>