Cookie.js实现保存用户名和密码操作(四)

最新推荐文章于 2024-08-22 08:42:46 发布

两个蝴蝶飞

最新推荐文章于 2024-08-22 08:42:46 发布

阅读量1.1w

点赞数 6

分类专栏： JS前端小方法

转载请注明出处(两个蝴蝶飞)

本文链接：https://blog.csdn.net/yjltx1234csdn/article/details/83096958

版权

JS前端小方法专栏收录该内容

27 篇文章 4 订阅

订阅专栏

上一章简单介绍了JS判断服务器端文件是否存在(三),如果没有看过，请观看上一章
在登录页面的时候，常常设置记住用户名和密码。虽说，可以用服务器端利用cookies进行记住密码。但最好还是在前端进行相关的记住密码。

一利用cookie.js进行记住密码

在plugins文件夹下，放置cookie.js,和jquery.js。
在这里插入图片描述

二在前端界面进行相关的引用.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面 </title>
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="plugins/bootstrap/css/bootstrap-theme.min.css"
	rel="stylesheet">
<link href="plugins/animate-css/animate.min.css" rel="stylesheet">
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-4 col-sm-offset-8" style="margin-top: 100px;padding-right:0;">
				<form class="form-horizontal" id="loginForm">
						<div class="" id="upTab">
							<div class="form-group">
								<!-- 记住,input框的name值，要与cookie.js中的key值相同 -->
								<input type="text" class="form-control" id="userName"
									placeholder="用户名" name="userName"> <i class="fa fa-user"></i>
							</div>
							<div class="form-group help">
								<input type="password" class="form-control" id="userPW"
									placeholder="密　码" name="userPW"> <i class="fa fa-lock"></i>
							</div>
							<div class="form-group">
								<div class="main-checkbox1">
									<input type="checkbox" value="None" id="remember" name="check"
										checked="checked" />
								</div>
								<label class="text" for="remember">记住我</label>
								<button type="button" class="btn btn-default" id="login">登录</button>
							</div>
						</div>
				</form>
			</div>
		</div>
	</div>
	<script src="plugins/jquery/jquery-2.1.1.min.js"></script>
	<script src="plugins/jquery/jquery.cookie.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="login.js"></script>
</body>
</html>

三相关的JS代码

$(document).ready(function () {
	//如果以前选择了记住密码，则设置复选框的值，将密码和用户名取出来。 否则取消选中。
    if ($.cookie("remember") == "true") {
    	//设置前端的复选框被选中
	    $("#remember").prop("checked", true);
	    $("#userName").val($.cookie("userName"));
	    $("#userPW").val($.cookie("userPW"));
    }else{
    	$("#remember").prop("checked", false);
    }
    //单击登录按钮，执行on_click方法。
    $("#login").click(on_click);
  });

需要单独设置一个save()方法，在登录时，调用这个save()方法.

 //记住用户名密码
  function Save() {
	  //如果选择了
    if ($("#remember").prop("checked")) {
    	//取出页面上用户名和密码的值
      var str_username = $("#userName").val();
      var str_password = $("#userPW").val();
      //利用cookie.js，放置到cookie中。 将用户名，密码，是否保存，放置到cookie中.
      $.cookie("remember", "true", { expires: 7 }); //存储一个带7天期限的cookie
      $.cookie("userName", str_username, { expires: 7 });
      $.cookie("userPW", str_password, { expires: 7 });
    }
    //如果没有选择了,则取消cookie存储的值
    else {
      $.cookie("remember", "false", { expire: -1 });
      $.cookie("userName", "", { expires: -1 });
      $.cookie("userPW", "", { expires: -1 });
    }
  };

在调用on_click()登录方法之时，调用这个save()方法。

function on_click(){
	//判断复选框的值
	Save();	
	//下面是具体的登录操作
}

四. 重启服务器，进行相关的验证

关掉浏览器后，重新打开，发现可以记住用户名和密码。
在这里插入图片描述

两个蝴蝶飞

关注

6
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Cookie.js实现保存用户名和密码操作(四)

一 利用cookie.js进行记住密码

二 在前端界面进行相关的引用.

三 相关的JS代码

四. 重启服务器，进行相关的验证

一利用cookie.js进行记住密码

二在前端界面进行相关的引用.

三相关的JS代码