前端面試之cookie

今天面試的時候問到了cookie，回答的不是太好，剛好趁此機會總結一下。
cookie的作用：
    1.可以在客戶端上保存用戶數據，起到簡單的緩存和用戶身份識別等作用。
    2.保存用戶的登陸狀態，用戶進行登陸，成功登陸後，服務器生成特定的cookie返回給客戶端，客戶端下次訪問該域名下的任何頁面，將該cookie的信息發送給服務器，服務器經過檢驗，來判斷用戶是否登陸。
    3.記錄用戶的行爲。  
    
cookie弊端：
     1.增加流量消耗，每次請求都需要帶上cookie信息。


    2.安全性隱患，cookie使用明文傳輸。如果cookie被人攔截了，那人就可以取得所有的session信息。


    3.Cookie數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉


cookie的增刪改查操作：


       /*添加cookie*/
    function setCookie(key,value,time){
        var exp = new Date();
        exp.setTime(exp.getTime() + time);
        document.cookie = key + '=' +value+';expires='+exp.toUTCString();
        var d = new Date();
        console.log(d.toUTCString());
        //console.log(time);
        
    }


   此方法中的toUTCString()方法是可根據格林威治時間（GMT）把Date對象轉換爲字符串，並返回結果




    /*刪除cookie*/
    function removeCookie(key){
        setCookie(key,'');
    }
    /*獲取某個cookie*/
   function getCookie(key) {
       var cookieArr = document.cookie.split('; ');
       for(var i = 0; i < cookieArr.length; i++) {
           var arr = cookieArr[i].split('=');
           if(arr[0] === key) {
               return arr[1];
           }
       }
       return false;
   }


  方法調用：
   //添加cookie  注意時間是5秒，不加引號
   setCookie('name','zh',5000);
   setCookie('age','30');


   //刪除cookie
   removeCookie('age');
   //設置一個定時器來驗證cookie的過期時間
   setInterval(function(){
       console.log(getCookie('name'));
       console.log(getCookie('age'));
   },1000);

運行結果：