版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36771997/article/details/73800999
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding:0;font-size: 16px;}
input{margin:10px 0 0 20px;border-radius:5px;}
input[type=text]{height: 25px;line-height: 25px;border-radius:0;}
#span{font-size: 14px;}
#submit{width:60px;text-align: center;height: 30px;line-height:30px;background: deepskyblue;border: none; }
</style>
<script>
window.onload=function(){
var oForm=document.getElementById('form');
var oUser=document.getElementsByName('username')[0];
var oPsw=document.getElementsByName('password')[0];
var oCheck=document.getElementById('checkBox');
oForm.onsubmit=function(){
//在Firefox上测试,火狐上可以查看cookie, contextmenu有个查看页面信息-安全-查看cookie
//获取oUser的值 不写在外面 主要是由于 要获取输入的值 而不是原始的两个空字符串
// var userValue=oUser.value;
// var pswValue=oPsw.value;
var oDate=new Date();
//重点一：切记要写字符串的格式不能写yanli
setCookie('username',oUser.value,7);
if(oCheck.checked){
setCookie('password',oPsw.value,7);
}
};
oUser.value=getCookie('username');
oPsw.value=getCookie('password');
//正确输出：
document.cookie='name=yanli';
// document.cookie='password=123456';
// alert(document.cookie);
}
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie= name+'='+value+';expires='+oDate;
}
function getCookie(name){
//重点三: 在这里过滤一定要用split('; ')其中分号后面需要一个空格,因为cookie两个数组间分号加空格的格式,否则切割的password应该为‘ password’
var arry=document.cookie.split('; ');
//可以不加;后面的空格试一试:
// var arry=document.cookie.split(';');
for(var i=0;i<arry.length;i++){
var arrySnd=arry[i].split('=');
if(arrySnd[0]==name){
//alert(arrySnd[1]);
return arrySnd[1];
}
};
return '';
// setCookie(name,1,-1);
// }
</script>
</head>
<body>
<form action="" id="form">
<input type="text" name="username" placeholder="请输入用户名"/>
<br/>
<input type="text" name="password" placeholder="请输入密码" />
<br/>
<input type="checkbox" id='checkBox' /><span id="span"> 十天内免登陆</span>
<br/>
<input type="submit" id="submit" value="提交"/>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding:0;font-size: 16px;}
input{margin:10px 0 0 20px;border-radius:5px;}
input[type=text]{height: 25px;line-height: 25px;border-radius:0;}
#span{font-size: 14px;}
#submit{width:60px;text-align: center;height: 30px;line-height:30px;background: deepskyblue;border: none; }
</style>
<script>
window.onload=function(){
var oForm=document.getElementById('form');
var oUser=document.getElementsByName('username')[0];
var oPsw=document.getElementsByName('password')[0];
var oCheck=document.getElementById('checkBox');
oForm.onsubmit=function(){
//在Firefox上测试,火狐上可以查看cookie, contextmenu有个查看页面信息-安全-查看cookie
//获取oUser的值 不写在外面 主要是由于 要获取输入的值 而不是原始的两个空字符串
// var userValue=oUser.value;
// var pswValue=oPsw.value;
var oDate=new Date();
//重点一：切记要写字符串的格式不能写yanli
setCookie('username',oUser.value,7);
if(oCheck.checked){
setCookie('password',oPsw.value,7);
}
};
oUser.value=getCookie('username');
oPsw.value=getCookie('password');
//重点二：格式名字=值;document.cookie要用名与值之间只能用’=‘，而值与下一个名之间只能用‘,’,尝试名与值之间用':'或者值与下一个名之间用';'下层cookie会覆盖上层cookie
//如document.cookie="userId=828; userName=hulk"; document.cookie='name:yanliang';document.cookie='password:123456';这都是错误案例
// document.cookie='password=123456';
// alert(document.cookie);
}
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie= name+'='+value+';expires='+oDate;
}
function getCookie(name){
//重点三: 在这里过滤一定要用split('; ')其中分号后面需要一个空格,因为cookie两个数组间分号加空格的格式,否则切割的password应该为‘ password’
var arry=document.cookie.split('; ');
//可以不加;后面的空格试一试:
// var arry=document.cookie.split(';');
for(var i=0;i<arry.length;i++){
var arrySnd=arry[i].split('=');
if(arrySnd[0]==name){
//alert(arrySnd[1]);
return arrySnd[1];
}
};
return '';
}
//去除cookie
// function removeCookie(name){// setCookie(name,1,-1);
// }
</script>
</head>
<body>
<form action="" id="form">
<input type="text" name="username" placeholder="请输入用户名"/>
<br/>
<input type="text" name="password" placeholder="请输入密码" />
<br/>
<input type="checkbox" id='checkBox' /><span id="span"> 十天内免登陆</span>
<br/>
<input type="submit" id="submit" value="提交"/>
</form>
</body>
</html>