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

最新推荐文章于 2024-05-07 22:44:30 发布

qq_37591637

最新推荐文章于 2024-05-07 22:44:30 发布

阅读量3.7w

点赞数 25

分类专栏： jsp网页学习专栏

本文链接：https://blog.csdn.net/qq_37591637/article/details/89278115

版权

jsp网页学习专栏专栏收录该内容

74 篇文章 7 订阅

订阅专栏

需求说明

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

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

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

应用的技术

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('');
			}
			
			 
		},
	})	
}

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

没有登录的时候

有用户名的时候

html代码

  <body onload="load_data()">

js代码

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

退出

html代码

                 <button type="button"  class="btn btn-danger" onclick="exitu()">退出</button>

js代码

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

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

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

qq_37591637

关注

25
点赞
踩
212

收藏

觉得还不错? 一键收藏
打赏
13
评论
js 实现登录成功首页显示用户名和退出登录

需求说明网站开发过程中，最常见的就是用户的登录和退出在用户登录成功的时候，首页要显示用户名，把用户名存储在浏览器中在点击退出的时候，要消除用户名，把用户名存储信息删除应用的技术jquery的localStorage技术+模块的隐藏和显示填写用户登录信息，点击登录触发js事件登录成功的话，就会把用户名和密码永久存储//用户登录function ulogin...
复制链接

扫一扫