js实现页面记住密码与自动登陆

最新推荐文章于 2024-04-27 06:46:18 发布

qq_35182361

最新推荐文章于 2024-04-27 06:46:18 发布

阅读量2.6k

点赞数

分类专栏：前端知识点

本文链接：https://blog.csdn.net/qq_35182361/article/details/80012671

版权

前端知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>统一认证平台登录</title>
<link rel="shortcut icon" th:href="@{/images/favicon.png}" type="image/png">
<link rel="stylesheet" th:href="@{/css/reset.css}">
<link rel="stylesheet" th:href="@{/css/index2.css}">
<script th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/domlastic.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
domLastic.init({
itemsClassnameToConnect: 'item',
animationDirection:'vertical'
});
domLastic.animateItems();

});
</script>
<style type="text/css">
.passstyle{
display: block;
min-height: 15px;
height: auto;
_height: 14px;
padding: 18px 0 2px;
line-height: 14px;
font-size: 14.7px;
color: #fc4343;
text-align: left;
margin-left: 80px;
}

</style>
</head>
<body>
<div class="logo">
<img th:src="@{images/logo.png}" alt="">
</div>
<div class="login-box">
<form method="post" id="fm1" th:object="${credential}">
<div class="user-icon">
<img th:src="@{/images/Photo2.png}" alt="">
</div>
<input type="text" id="username" name="username" th:placeholder="#{screen.welcome.label.put.netid}" >
<input type="password" id="password" name="password" th:placeholder="#{screen.welcome.label.put.password}">
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<div class="passstyle item">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"> </span>
</div>
<button οnclick="userLogin()" accesskey="l" >登录</button><br/>
<input type="checkbox" style="width:20px;height:20px" name="rememberMe" id = "rememberMe"> 记住密码
</form>
</div>
<div class="foot">
主办单位：XXX     Copyright@ XXX
</div>
</body>
<script th:src="@{/js/hendon/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script th:inline="javascript">

function addCookie(name,value,days,path){ /**添加设置cookie**/
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 3600000 * 24);
//path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用
path = path == "" ? "" : ";path=" + path;
//GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC
//参数days只能是数字型
var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}

function getCookieValue(name){ /**获取cookie的值，根据cookie的键获取值**/
//用处理字符串的方式查找到key对应value
var name = escape(name);
//读cookie属性，这将返回文档的所有cookie
var allcookies = document.cookie;
//查找名为name的cookie的开始位置
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有该名字的cookie，那么提取并使用它的值
if (pos != -1){ //如果pos值为-1则说明搜索"version="失败
var start = pos + name.length; //cookie值开始的位置
var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie
var value = allcookies.substring(start,end); //提取cookie的值
return (value); //对它解码
}else{ //搜索失败，返回空字符串
return "";
}
}

function deleteCookie(name,path){ /**根据cookie的键，删除cookie，其实就是设置其失效**/
var name = escape(name);
var expires = new Date(0);
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}

/**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/
window.onload = function(){
var userNameValue = getCookieValue("username");
if(userNameValue!='' && null!=userNameValue){
document.getElementById("username").value = userNameValue;
}
var userPassValue = getCookieValue("password");
if(userPassValue!='' && null!=userPassValue){
document.getElementById("password").value = userPassValue;
}
var check = getCookieValue("check");
if(check=='checked'){
document.getElementById("rememberMe").setAttribute("checked",true);
layer.msg('自动登陆中...', {
//icon: 1,
time: 3000
}, function(){
});
setTimeout(function () {
if (document.getElementById("rememberMe").checked) {
$("#fm1").submit();
}else{
deleteCookie("check","/");
layer.alert('您取消了记住密码', {icon: 1});
}
},3000)
}
}

$("#rememberMe").click(function(){
if (document.getElementById("rememberMe").checked) {
var str_username = $("#username").val();//用户名
var str_password = $("#password").val();//密码
if(str_username!='' && str_password!=''){
addCookie("username", str_username,7,"/");
addCookie("password", str_password,7,"/");
deleteCookie("check","/");
addCookie("check", 'checked',7,"/");
}
}
else {
document.getElementById("rememberMe").removeAttribute("checked");
if(!getCookieValue("check").equals('') && null!=getCookieValue("check")){
deleteCookie("check","/");
}
}
});

//用户登陆
function userLogin(){ /**用户登录，其中需要判断是否选择记住密码**/
//简单验证一下
var userName = document.getElementById("username").value;
var userPass = document.getElementById("password").value;

var objChk = document.getElementById("rememberMe");
if(userName!='' && userPass!=''){
if(objChk.checked){
//alert("记住了你的密码登录。");
$("#fm1").submit();
}else{
//alert("不记密码登录。");
$("#fm1").submit();
}
}else{
layer.alert('请填写用户信息', {icon: 1});
}
}
</script>
<script>

</script>
</html>

qq_35182361

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现页面记住密码与自动登陆

&lt;!DOCTYPE html&gt;&lt;html xmlns:th="http://www.thymeleaf.org"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;统一认证平台登录&lt;/title&gt; &lt;link rel="shortcut ico
复制链接

扫一扫

专栏目录