附上例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form class="form-horizontal login-location" id="myform" autocomplete="on"> <div class="form-group"> <label class="col-sm-3 col-xs-3 control-label label-text">账号</label> <div class="col-sm-9 col-xs-9"> <input type="text" name="data[username]" placeholder="教师/学生账号" class="form-control" id="username"> </div> </div> <div class="form-group"> <label class="col-sm-3 col-xs-3 control-label label-text">密码</label> <div class="col-sm-9 col-xs-9"> <input type="password" name="data[password]" placeholder="密码" class="form-control" id="password"> </div> </div> <div class="form-group"> <label class="col-sm-3 col-xs-3 control-label label-text"></label> <div class="col-sm-9 col-xs-9 checkbox"> <label><input type="checkbox" id="remember">请记住我</label> </div> </div> <div class="form-group"> <div class="col-md-12"> <button class="btn btn-success btn-block" type="submit">立即登录</button> </div> </div> </form> <script> let base = new Base64(); window.onload = function(){ var oForm = document.getElementById('myform'); var oUser = document.getElementById('username'); var oPswd = document.getElementById('password'); var oRemember = document.getElementById('remember'); //页面初始化时，如果帐号密码cookie存在则填充 if (getCookie('username') && getCookie('password')) { oUser.value = getCookie('username'); let oPswd2 = base.decode(getCookie('password')); oPswd.value = oPswd2; oRemember.checked = true; } //复选框勾选状态发生改变时，如果未勾选则清除cookie oRemember.onchange = function() { if (!this.checked) { delCookie('username'); delCookie('password'); } }; //表单提交事件触发时，如果复选框是勾选状态则保存cookie oForm.onsubmit = function() { debugger; if (oRemember.checked) { setCookie('username', oUser.value, 7); //保存帐号到cookie，有效期7天 let oPswd1 = base.encode(oPswd.value); setCookie('password', oPswd1, 7); //保存密码到cookie，有效期7天 } }; }; //设置cookie function setCookie(name, value, day) { var date = new Date(); date.setDate(date.getDate() + day); document.cookie = name + '=' + value + ';expires=' + date; }; //获取cookie function getCookie(name) { var reg = RegExp(name + '=([^;]+)'); var arr = document.cookie.match(reg); if (arr) { return arr[1]; } else { return ''; } }; //删除cookie function delCookie(name) { setCookie(name, null, -1); }; //加密解密Base64 function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // public method for encoding this.encode = function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = _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 + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.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 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _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 = _utf8_decode(output); return output; } // private method for UTF-8 encoding _utf8_encode = function (string) { string = string.replace(/ /g," "); 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; } } </script> </body> </html>