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

柔光的暖阳◎ 2024-03-26 11:07 77阅读 0赞

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

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

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

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

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

### 登录 ###

**演示代码**

在这里主要是使用这段代码

*  window.sessionStorage.setItem(“username”, username)  
    通过这段代码可以把用户的输入的内容存储到当前的网页，这样的话这个输入的信息就被当前的网页，以及后面的网页共享了，这样的话，后面的网页就可以访问到这个用户的姓名了。

这里还加上一个location.href进行页面的跳转，当用户点击按钮的时候，就会跳转到后面的页面。

**项目的结构**  
![在这里插入图片描述][b670c6f37c8641b991b388d4aff02b87.png]

index.html

<!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>

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

这个user.html的写法如下

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

### 登录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>

![在这里插入图片描述][8aad6a227cdc433fbabe33464dcaaa4c.png]

[b670c6f37c8641b991b388d4aff02b87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c941b79b20994f60b31a9a1461ff19c2.png
[bc794db5083e40e6b44c679f86e5eb5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dc5f75975f85450db99aa22fe2c50018.png
[6b59bfeb0dcf4d1b9724ddd567eeb7a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d304bbc5037f4df286968b3ccee0e986.png
[8aad6a227cdc433fbabe33464dcaaa4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/faebf98e881b4fadb9c40caec213b7c5.png