原生JS--COOKIE:
COOKIE基礎及應用:
1.什么是COOKIE==>頁面用來保存信息,比如:自動登錄,記住用戶名
2.COOKIE的特性:
--同一個網站中,所有的頁面共享同一套cookie
--數量,大小有限(4k-10k,不能用來存大的內容)
--過期時間
3.設置cookie:(本地下測試cookie要在FF下面測試,IE,Chrom會把cookie去掉);
--格式:名字=值(多條數據通過'; '(即分號和空格) 來分開)
--不會覆蓋document.cookie="user=yufan";document.cookie="pass=123456";
--過期時間:expires=時間
--COOKIE與日期對象共同使用,設置過期時間
var oDate=new Date();
oDate.setDate(oDate.getDate()+14); //設置獲取的日期,並不是系統日期
document.cookie="user=yufan; expires="+oDate; //這樣設置的這個cookie將在14天后過期
4.將設置cookie封裝成一個函數:
function setCookie(name,value,myDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+myDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
setCookie('username','yufan',25);
setCookie('pass','123456',14);
5.讀取cookie:對獲取的document.cookie進行字符串分割
讀取cookie封裝成一個函數:
function getCookie(name){
//document.cookie獲取當前網站的所有cookie
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split('=');
if(arr1[0]==name){
return arr1[1];
}
}
return '';
}
alert(getCookie(username));
6.刪除cookie:時間設置為已經過期的時間,系統自然會刪除
function removeCookie(name){
setCookie(name,1,-1);
}
removeCookie(username,1,-1);
7.示例:記住用戶登錄的用戶名和密碼
方法:可以在用戶第一次登錄時用cookie記住登錄的用戶名和密碼，
下次再打開頁面時用戶名和密碼就自動出現在表單里面
--提交時:記住用戶名
--window.onload:讀取用戶名
1 HTML代碼: 2 <div id="cookie">
3 <form id="form1" action="">
4 用戶名:<input type="text" name="username" value="">
5 密碼:<input type="password" name="password" value="">
6 <input type="submit" name="" value="登錄">
7 </form>
8 </div>
9
10 JS代碼: 11 <script type="text/javascript">
12 //cookie記住用戶名,密碼
13 window.onload=function(){ 14 var oForm=document.getElementById('form1'); 15 var username=document.getElementsByName('username')[0]; 16 var pass=document.getElementsByName('password')[0]; 17 oForm.onsubmit=function(){ 18 setCookie('username',username.value,25); 19 setCookie('pass',pass.value,25); 20 } 21 username.value=getCookie('username'); 22 pass.value=getCookie('pass'); 23
24 function setCookie(name,value,myDay){ 25 var oDate=new Date(); 26 oDate.setDate(oDate.getDate()+myDay); 27 document.cookie=name+'='+value+'; expires='+oDate; 28 } 29
30 function getCookie(name){ 31 //document.cookie獲取當前網站的所有cookie
32 var arr=document.cookie.split('; '); 33 for(var i=0;i<arr.length;i++){ 34 var arr1=arr[i].split('='); 35 if(arr1[0]==name){ 36 return arr1[1]; 37 } 38 } 39 return ''; 40 } 41
42
43 } 44 </script>