js cookie realizes the function of remembering passwords
- 2021-07-12 04:56:10
- OfStack
In this article, we share the methods of remembering passwords in js and jQuery, as follows
1. js realizes the function of remembering passwords
html:
<form id="form22" name="form22" action="checklogin.action" method="post" >
<div class="username" style="margin-top:50px;">
<label> User name: </label>
<input type="text" name="username" id="userName" />
<span id="myuser" style="color: red; font-size:12px; font-weight: normal;"></span>
</div>
<div class="password">
<label> Dense Code: </label>
<input name="password" id="passWord" type="password" />
<span id="mypass" style="color: red; font-size:12px; font-weight: normal;"></span>
</div>
<div class="user_type" >
<label> </label>
<input type="checkbox" id="saveUserName" style="float: left; margin-top:3px;" />
<span> Remember the user </span>
</div>
<input type="button" value="" class="btn_login" id="btn_login" onclick="checkform();"/>
</form>
cookie.js:
function setCookie (name, value) {
var Days = 30; // This cookie Will be saved 30 Days
var exp = new Date();
exp.setTime(exp.getTime() + 1000);
if(value==""||value=="null"
||value=="null"||value==" "){
}else{
document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038 19:14:07 GMT";
}
}
function getCookie(sName){
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{
return aCrumb[1];
}
}
return null;
}
function checkCookieExist(name){
if (getCookie(name))
return true;
else
return false;
}
function deleteCookie(name, path, domain){
var strCookie;
// Check Cookie Does it exist
if (checkCookieExist(name)){
// Settings Cookie The time limit of has expired
strCookie = name + "=";
strCookie += (path) ? "; path=" + path : "";
strCookie += (domain) ? "; domain=" + domain : "";
strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT";
document.cookie = strCookie;
}
}
function saveCookie(name, value, expires, path, domain, secure){
var strCookie = name + "=" + value;
if (expires){
// Calculation Cookie Duration of , The parameter is days
var curTime = new Date();
curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
strCookie += "; expires=" + curTime.toGMTString();
}
// Cookie Path of
strCookie += (path) ? "; path=" + path : "";
// Cookie Adj. Domain
strCookie += (domain) ? "; domain=" + domain : "";
// Do you need secure transmission , For 1 Boolean values
strCookie += (secure) ? "; secure" : "";
document.cookie = strCookie;
}
login.js
window.onload = function(){
//console.log("ctx: " + "${ctx}");
var name = getCookie("loginUserName");
document.getElementById("passWord").value="";
if(name != null && name != "") {
document.getElementById("userName").value = name;
document.getElementById("passWord").focus();
} else { document.getElementById("userName").focus();
}
}
function checkform(){
......
var isChecked = document.getElementById("saveUserName").checked;
if(isChecked) {
setCookie("loginUserName",userName);
}
......
}
2. jquery realizes the function of remembering passwords
Reference: http://www.cnblogs.com/lindaZ/p/5069981. html
html:
<form class="form-signin">
<input type="text" id="username" name="account" autofocus required placeholder=" User name " class="form-control" style="width: 250px; margin-bottom: 5px;">
<input type="password" id="password" name="password" required placeholder=" Password " class="form-control" style="width: 250px;">
<br/>
<input id="remember_me" type="checkbox" name="remember_me" onkeydown="check_enter(event)" style="width:250;">
<span for="remember_me" onkeydown="check_enter(event)" style="width:250px"> Remember me </span>
<br/><br/>
<span class="btn btn-lg btn-primary btn-block"> Deng Record </span>
</form>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
Whether the checkbox is selected is judged, and if so, the cookie is stored:
if ($("#remember_me").attr("checked")) {
$.cookie("rmbUser", "true", { expires: 7 }); // Storage 1 A band 7 Of a time limit of days cookie
$.cookie("username", account, { expires: 7 });
$.cookie("password", password, { expires: 7 });
}
else {
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
}
When js is loaded on the login page each time, the user name and password in cookie are taken out. If cookie is not empty, the user name and password input boxes are filled with the contents in cookie, and the check box is set to the checked state:
$().ready(function(){
// Get cookie Value of
var username = $.cookie('username');
var password = $.cookie('password');
// Fill the obtained value into the input box
$('#username').val(username);
$('#password').val(password);
if(username != null && username != '' && password != null && password != ''){
// Select the Save Secret check box
$("#remember_me").attr('checked',true);
}