JS——Cookie

使用Cookie

1》什麼是Cookie

解釋：在頁面中用來保存信息的（例如：自動登陸、記住用戶名）

特性：1）同一個網站中全部頁面共享一套cookie；

　　　2）數量、大小有限；

　　　3）具備過時時間；

在js中使用cookie：即：document.cookie

注意：若要在瀏覽器本地查看cookie的值，須要使用ff瀏覽器；而其餘瀏覽器查看cookie的話，須要搭載服務器才能。

 

2》cookie的使用

1）設置cookie

　　a、格式：名字=值　　（例如：‘user=George’）

　　b、document.cookie設置值時，不會覆蓋原有的值　　（即：user=George; pass=123 兩個值不會覆蓋）

　　c、能夠設置它的過時時間　　（用「expires=時間」的方法，須要用日期對象來配合使用）

 

<script>
　　var oDate=new Date();
　　oDate.setDate(oDate.getDate()+30);   //設置日期時間爲當前時間的30天后
        
　　document.cookie='user=George;expires='+oDate;    //js中用來設置cookie的值，其中expires表示設置的時長
　　document.cookie='pass=123';

　　alert(document.cookie)   //輸出cookie的值　　即；user=George; pass=123;
</script>

 

解釋：在ff瀏覽器中便可輸出cookie的值，其中user=George的值設置爲30天的保存日期。當關閉瀏覽器後，所設置的cookie值中只剩下user=George，由於它的過時時間還沒到（30天時間），而pass=123的值會消失

　　d、封裝以上代碼，得出新的函數：

 1 <script>
 2 　　//封裝設置cookie函數
 3 　　function setCookie(name,value,iDay){
 4 　　　　var oDate=new Date();
 5 　　　　oDate.setDate(oDate.getDate()+iDay);
 6             
 7 　　　　document.cookie=name+'='+value+';expires='+oDate;
 8 　　}
 9 　　setCookie('George','123',30);
10 　　setCookie('Rose','456',30);
11         
12 　　alert(document.cookie);          //設置完cookie的值，輸出爲：George=123; Rose=456
13 </script>

解釋：

第3行代碼：傳入三個參數（name、value、iDay），分別表示：名字、值、時間；

第4-5行代碼：用日期對象來配合使用設置它的過時時間；

第7行代碼：設置cookie的值（並使用過時時間方法）

 

2）讀取cookie

　　a.用字符串分割的方法（split）

 1 <script>
 2 　　//封裝獲取cookie函數
 3 　　function getCookie(name){                 //傳入一個name參數
 4 　　　　var arr=document.cookie.split(';');　　//結合上面的設置cookie方法，用數組split方法，拆分字符串，結果爲：George=123, Rose=456
 5 　　　　　　　　//alert(arr);
 6 　　　　for(var i=0;i<arr.length;i++){
 7 　　　　　　var arr1=arr[i].split('=');
 8 　　　　　　　　//alert(arr1)                   //用數組split方法，拆分字符串，結果爲：George,123, Rose,456
 9 　　　　　　if(arr1[0]==name){                 //用於判斷所獲取的cookie值是否與name的值相同
10 　　　　　　　　return arr1[1];                 //與name值相同，則返回arr1[1]的值
11 　　　　　　}
12 　　　　}
13 　　　　return '';                             //與name值不一樣，則返回空值
14 　　}
15 　　alert(getCookie('George'));               //輸出：123
16 </script>

解釋：

 

3）刪除cookie

　　a.改變過時時間（把iDay的值設置爲-1，讓它顯示昨天過時）

1 <script>
2 　　//封裝刪除cookie函數
3 　　function removeCookie(name){
4 　　　　setCookie(name,'1',-1);                 //調用setCookie函數，把setCookie中的oDate設爲-1，讓它昨天過時，即達到刪除cookie的目的
5 　　}
6 　　alert(getCookie('George'));                 //刪除前，輸出：123
7 　　removeCookie('George');
8 　　alert(getCookie('George'));                 //刪除後，輸出：  （空值）
9 </script>

 

其餘詳細瞭解能夠參考菜鳥教程：https://www.runoob.com/js/js-cookies.html