通过session实现用户的登录与登出功能

极客李华

已于 2024-02-01 01:02:15 修改

阅读量3.4k

点赞数 1

分类专栏： JS学习之旅文章标签： javascript 前端 html

于 2023-02-19 22:43:24 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/129115598

版权

JS学习之旅专栏收录该内容

55 篇文章

订阅专栏

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-CSDN博客
合作方式：私聊+
这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

通过session实现用户的登录与登出功能

本文讲解，就是在常见的登录注册页面中，我们是如何在登录之后，把用户的信息传送到后面的网页。

首先讲解原理，原理是session功能，通过session的在当前浏览器的信息共享功能，实现后面的网页可以获取到登录用户的信息。

登出用户的原理就是，使用清除session的功能，清除本网页存储的用户的session，专业就实现了退出用户的功能。

这里通过前端代码进行演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    账号：<input id="username"><br>
    密码：<input id="password"><br>
    <button id="btn">登录</button>
</body>

    
<script type="text/javascript">
   document.getElementById("btn").onclick = function(){    
        // 把用户的信息存储到浏览器中 记得需要存储JSON形式
        var username = document.getElementById("username").value
        // 把用户的信息存储到浏览器中 记得需要存储JSON形式
        window.sessionStorage.setItem("username", username)
        console.log(username)
        location.href = "http://127.0.0.1:5500/user.html"
   }
</script>
 
</html>

运行效果
在这里插入图片描述
点击登录之后，就会转到这个页面，然后用户的姓名就会显示到网页上面了。

这个user.html的写法如下

这里是通过获取共享的sesion数据，通过getItem进行获取共享的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是：<div id="username"></div>
</body>
<script>
    var username = sessionStorage.getItem("username");
    console.log(username)
    document.getElementById("username").innerHTML = username
</script>
</html>

登录logout

演示代码
这里的主要的功能实现是，通过这句话，移除本地存储的session，这样就退出了本地的登录。
然后再进行一个跳转到原来的index.html页面，这样就返回了主页了。

window.sessionStorage.removeItem(“username”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是：<div id="username"></div>
    <button id="logout">登出</button>
</body>
<script>
    var username = sessionStorage.getItem("username");
    console.log(username)
    document.getElementById("username").innerHTML = username

    document.getElementById("logout").onclick = function(){
        window.sessionStorage.removeItem("username")
        location.href = "http://127.0.0.1:5500/index.html"
    }

</script>
</html>