COOKIE基礎與應用
阿新 • • 發佈：2018-12-10
什麼是cookie
- 頁面用來儲存資訊（自動登陸、記住使用者名稱）
- cookie的特性：
- 同一個網站中所有頁面共享一套cookie
- 數量、大小有限(4-10k)
- 過期時間
- js中使用cookie
- document.cookie
使用cookie
- cookie的使用
- 設定cookie
- 格式：名字=值
- 不會覆蓋(但是同名會覆蓋)
- 過期時間：expries=時間
- 日期物件的使用
- 封裝函式
- 讀取cookie
- 字串分割
- 刪除cookie
- 已經過期
在cookie中，=是新增
<script>
document.cookie='user=blue';
document.cookie='pass=123456';
alert(document.cookie)
</script>
如果把cookie刪除了。alert(document.cookie)，彈出的為空。那是因為cookie有過期時間。
<script> var oDate=new Date(); oDate.setDate(oDate.getDate()+8)//用這種方法計算幾天以後的日期 document.cookie='user=blue;expires='+oDate; // alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()); alert(document.cookie) </script> //即使註釋 document.cookie='user=blue;expires='+oDate;也還是有user
設定cookie，封裝成函式：
<script> function setCookie(name,value,iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } setCookie('userName','dancingblue',365); setCookie('password','123456',14); </script>
<script>
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';//如果什麼也沒找到也就是第一次，就返回''
}
alert(getCookie('password'));
</script>刪除cookie
function removeCookie(name){
setCookie(name,1,-1);//cookie在-1以後消失
}<script>
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';//如果什麼也沒找到也就是第一次，就返回''
}
function removeCookie(name){
setCookie(name,1,-1);//cookie在-1以後消失
}
removeCookie('userName');
alert(document.cookie);
</script>用cookie記錄上次登陸的使用者名稱和密碼。
<script>
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';//如果什麼也沒找到也就是第一次，就返回''
}
function removeCookie(name){
setCookie(name,1,-1);//cookie在-1以後消失
}
//window.onloa時讀取資料
window.onload=function(){
var oForm=document.getElementById('form1');
var oUser=document.getElementsByName('user')[0];
oForm.onsubmit=function(){
setCookie('user',oUser.value,14);
}
oUser.value=getCookie('user');
}
</script>
</head>
<body>
<form action="http://www.zhinengshe.com/" id="form1">
使用者名稱: <input type="text" name="user"/> <br/>
密 碼: <input type="password" name="pass"/> <br/>
<input type="submit" value="登陸"/>
</form>
</body>