js 实现登录成功首页显示用户名和退出登录

不念不忘少年蓝@ 2022-02-20 09:09 2596阅读 0赞

### ***需求说明*** ###

网站开发过程中，最常见的就是用户的登录和退出

在用户登录成功的时候，首页要显示用户名，把用户名存储在浏览器中

在点击退出的时候，要消除用户名，把用户名存储信息删除

--------------------

> ### ***应用的技术*** ###

jquery的localStorage技术+模块的隐藏和显示

--------------------

> ### ***填写用户登录信息，点击登录触发js事件*** ###

登录成功的话，就会把用户名和密码永久存储

//用户登录
    function ulogin(){
    	//获取用户名和密码,登录成功以后，把用户名存储在session里面，然后显示在首页里面
    	var username=$("#uusername").val();
    	var password=$("#password").val();
    	$.ajax({
    		method : 'post',
    		url : "http://localhost:8080/LawerSys/user_l.action",
    		dataType : "text",
    		data : {
    			username : username,
    			password : password
    		},
    		success : function(ret) {
    			//提示注册成功
    			if(ret=="success"){
    				//关闭模态框
    				 $("#close_lo").click(); 
    				 //把用户名密码存储在session里面，首页显示用户名称
    				 localStorage.setItem("username",username);	
    				 load_data();
    			}else{
    				alert("用户名或者密码输入错误，请重新输入");
    				$("#password").val('');
    			}
    			
    			 
    		},
    	})	
    }

在首页刚加载的时候，就开始判断，如果浏览器里面有存储信息的话，就显示用户名，不然的话，先显示游客状态

没有登录的时候

![201904130950372.png][]

有用户名的时候

![20190413095051466.png][]

html代码

js代码

//页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称
    function load_data(){
    	 var theme=localStorage.getItem("username");
    	 if(theme==null||theme==""){
    		$("#cue").show(); 
    		 $("#uname").html('');
    	 }else{
    		 $("#cue").hide();  
    		 $("#uname").html(theme);
    	 }
    }
    //页面刚加载的时候，开始判断，如果有用户名，就显示在页面上，如果没有用户名的话，就显示登录名称

--------------------

### ***退出*** ###

***html代码***

***js代码***

//退出登录
    function exitu(){
    	localStorage.removeItem("username"); 
    	//刷新部分
    	load_data();
    }
    //退出登录

根据状态来决定要显示什么内容

[201904130950372.png]: /images/20220220/d1ffd120ce4c4e58b13b311dad38ce19.png
[20190413095051466.png]: /images/20220220/59aef14bf2394e428a5b276c6c8a30a3.png