需求说明
网站开发过程中,最常见的就是用户的登录和退出
在用户登录成功的时候,首页要显示用户名,把用户名存储在浏览器中
在点击退出的时候,要消除用户名,把用户名存储信息删除
应用的技术
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);
}
}
//页面刚加载的时候,开始判断,如果有用户名,就显示在页面上,如果没有用户名的话,就显示登录名称