<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<%@ include file="/WEB-INF/jsp/includes/common.jsp" %>
<%--<%@ include file="/WEB-INF/jsp/includes/common_css.jsp" %>--%>
<link rel="stylesheet" href="${base}/css/login.css">
</head>
<body onload="getCookie();">
<div class="login">
<div class="login_box">
<h1>自动保存密码</h1>
<div class="login_right fr">
<form action="" id="loginForm">
<img class="login_user_img" src="${base}/img/user_name.png" height="26" width="27"/>
<input type="text" id="loginName" placeholder="请输入用户名"><br>
<img class="login_user_img" src="${base}/img/pwd.png" height="26" width="22"/>
<input type="password" id="loginPwd" placeholder="请输入密码">
<span>记住密码</span>
<input name="" type="checkbox" value="" id="rememberMe" checked="checked"/>
<a href="" class="btn_login">登录</a>
</form>
</div>
</div>
<div class="footer">
<p>Copyright © 2015-2018 版权所有 京ICP备 京公网安备 号</p>
</div>
</div>
</body>
<%@ include file="/WEB-INF/jsp/includes/common_js.jsp" %>
<script src="${base}/js/jquery.cookie.js"></script>
<script>
$(document).ready(function () {
layui.use('layer', function () { //独立版的layer无需执行这一句
var $ = layui.jquery,
layer = layui.layer;
$(".fr").on("click", ".btn_login", function () {
/* getCookie();*/
var username = $("#loginName").val();
var password = $("#loginPwd").val();
if (username == "" || password == "") {
layer.msg('请输入用户名或密码');
}
//判断是否选中复选框，如果选中，添加cookie
var jizhupwd=$("input[type='checkbox']").is(':checked');
console.log("是否记住密码："+jizhupwd);
if(jizhupwd){
//添加cookie
setCookie();
}else{
clearAllCookie();
}
netWorking(username,password);//联网上传账号密码
});
});
});
function netWorking(username,password){
$.ajax({
url: base + "loginCloud/ajax/login.htm",
data: {"loginname": username, "password": password},
type: "POST",
dataType: "json",
async: false,
success: function (data) {
if (data.status == 1) {
layer.msg("登录成功");
window.location.href = base + "region/capitalDownByTypeView.htm";
window.event.returnValue=false;
} else {
if (data.errCode == 00010) {
layer.msg("服务器异常");
} else {
layer.msg('用户名或密码错误！');
}
}
}
});
}
//设置cookie
function setCookie(){
var username = $("#loginName").val(); //获取用户名信息
var password = $("#loginPwd").val(); //获取登陆密码信息
var checked = $("input[type='checkbox']").is(':checked');//获取“是否记住密码”复选框
//console.log("setCookie方法是否记住密码："+checked);
if(checked){ //判断是否选中了“记住密码”复选框
//设置cookie过期时间
var date = new Date();
date.setTime(date.getTime()+30*24*60*60*1000);// cookie过期时间 设置为 30天
//console.log("cookie过期时间："+date);
$.cookie("login_code",username,{ expires: date, path: '/' });//调用jquery.cookie.js中的方法设置cookie中的用户名
$.cookie("pwd",Base64.encode(password),{ expires: date, path: '/' });//调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64（jquery.base64.js）进行加密
}else{
$.cookie("login_code", null);
$.cookie("pwd", null);
}
}
//清除所有cookie函数
function clearAllCookie() {
var date=new Date();
date.setTime(date.getTime()-10000);
var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
console.log("需要删除的cookie名字："+keys);
if (keys) {
for (var i = keys.length; i--;)
document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/";
}
}
//获取cookie
function getCookie(){
debugger;
var loginCode = $.cookie("login_code"); //获取cookie中的用户名
var pwd = $.cookie("pwd"); //获取cookie中的登陆密码
console.log("获取cookie:账户："+loginCode);
console.log("获取cookie:密码："+pwd);
if (!loginCode||loginCode==0) {
console.log("账户："+!loginCode);
//alert("请输出内容！");
}else{
$("#loginName").val(loginCode);
}
if(!pwd||pwd==0){
console.log("密码："+!pwd);
}else{
//密码存在的话把密码填充到密码文本框
//console.log("密码解密后："+$.base64.decode(pwd));
$("#loginPwd").val(Base64.decode(pwd));
//密码存在的话把“记住用户名和密码”复选框勾选住
$("[name='jizhu']").attr("checked","true");
}
}
</script>
</html>/ base 64 js
var Base64 = {
// private property
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode: function(input) {
var output = "";
input = input+"";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// private method for UTF-8 encoding
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
// private method for UTF-8 decoding
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
公共 js