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

2023-10-13 11:32| 来源: 网络整理| 查看: 265

需求说明

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

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

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

应用的技术

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代码

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(); } //退出登录

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

【本文地址】

公司简介

联系我们

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

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