關(guān)于cookie

cookie

• cookie的定義

  cookie是前端開發(fā)中的一個重要概念。cookie翻譯為“甜餅干”,由W3C提出被各大瀏覽器支持的一種解決HTTP請求無狀態(tài)的方案。
  http的無狀態(tài)是指客服端和服務(wù)端的數(shù)據(jù)交換完畢，連接一旦中斷，再次建立連接時又是一個全新的連接，之前的連接的數(shù)據(jù)會被徹底“遺忘”，這就使服務(wù)端無法弄明白這次的連接是由誰發(fā)起的。

• cookie的使用場景

當用戶瀏覽網(wǎng)站需要對用戶身份進行判斷，來進行不同響應(yīng)時，可以利用cookie。第一次發(fā)送請求判斷校驗了用戶身份后，把用戶身份存放在cookie中，當下次發(fā)送請求時服務(wù)端就可從cookie中獲取之前存放在cookie中信息，而不用再次經(jīng)過復(fù)雜校驗。
或是用來保存一些用戶在網(wǎng)頁上自定義的一些設(shè)置，在頁面跳轉(zhuǎn)、頁面關(guān)閉后依然能夠記錄這些信息。針對不同用戶的不同操作做出相應(yīng)的響應(yīng)、

• cookie的前端封裝代碼

var cookie = {
       set:function(key,val,time){//設(shè)置cookie方法
           var date = new Date(); //獲取當前時間
           date.setDate(date.getDate() + time)//設(shè)置cookie過期時間
           document.cookie = key + "=" + val +
            ((time==null) ? '' : ';expires='+time.toGMTString())
       },
       get:function(key){//獲取cookie方法
           /*獲取cookie參數(shù)*/
           //刪除cookie中的所有空格;
           var pureCookie = document.cookie.replace(/\s+/g,"");
           //以分號分割cookie存放在arrCookie中
           var arrCookie = pureCookie.split(";");
           //聲明要輸出的值
           var resultVal;  
   
           //遍歷arrCookie找出與輸入相同的鍵值對，輸出相應(yīng)值
           arrCookie.map((item,index) => {
               var result = item.split("=");
               if(key == result[0]){
                   resultVal = result[1];
                   break;
               }
           })
   
           return resultVal;
       }
} 

代碼中封裝了一個cookie對象，它包含2個方法set和get。

set可以設(shè)置cookie，其中包含3個參數(shù)，cookie的屬性名，cookie的值，cookie的過期時間

get可以取出與輸入屬性名相同的cookie值

• cookie的屬性

• max-age(expires):指定cookie的有效期，單位是秒，表示cookie存在的秒數(shù)

  1. max-age為負:表示此cookie只在本窗口和子窗口有效
  2. max-age為0:表示刪除此cookie

• domain:可以訪問該cookie的域名。如果設(shè)置為“.google.com”，則所有以“google.com”結(jié)尾的域名都可以訪問該Cookie。注意第一個字符必須為“.”

• path:可以訪問該cookie的域名。如果設(shè)置為“/”，則該域名下的所有路徑都可以訪問該Cookie。注意最后一個字符必須為“/”

• 查看cookie的方法：

  
  
  help.jpg

• cookie存在的問題

• 存儲大小只有4kb

• 每次發(fā)送http請求時cookie都會一并發(fā)送，浪費帶寬

• HTML5的 localStorage和sessionStorage有了更好的解決辦法