sessionStorage登录保存用户名、注销

最新推荐文章于 2024-08-19 17:52:44 发布

MangGit

最新推荐文章于 2024-08-19 17:52:44 发布

阅读量2.7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41599291/article/details/91952355

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

显示页面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>