js基礎篇——cookie使用要點

1.Cookie數量和長度的限制。各個瀏覽器的限制不一樣IE7+和Firefox最大限制爲50條，chrome和Safari無限制，IE6-最大限制20條。且全部瀏覽器限制每一個cookie長度不能超過4KB，不然會被截掉。

　　因此：現代瀏覽器cookie個數不要超過50條，大小不能超過4KB；簡而精。

2.安全性問題。客服端每次訪問服務端都會攜帶cookie，cookie容易被人攔截，全部的session信息被公開。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

　　因此：cookie不要保存機密信息，讓服務端來確保用戶信息安全。

3.關於cookie的編碼。原來的cookie編碼大多使用escape和unescape進行編解碼，這個編解碼針對普通字母和數字以及*，+，-，.，/，@，_之外的其餘字符，能夠說是比較簡單粗暴的。後來ECMAScript v3 已從標準中刪除了escape進行編碼，分解成了encodeURI（針對URL風格進行編碼）和 encodeURIComponent（針對URL風格編碼加上URI 組件的標點符號進行編碼，比encodeURI要編碼的字符更多）。通常來講cookie編碼只須要能對"="和";"進行編碼便可。

　　因此在不能使用escape的狀況下使用encodeURIComponent編碼,decodeURIComponent解碼。

4.cookie每次隨HTTP請求一塊兒發送，浪費寬帶，移動端推薦使用localStorage。

 

5.使用方法

document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value)

 　　每執行一次上面的代碼就會添加一個cookie，若是cookie中已經存在相同name的cookie則徹底覆蓋（這裏的覆蓋不單單隻value值的覆蓋，指的是覆蓋一切當前name對應的cookie信息，好比失效時間expires屬性、path屬性等等）。

　　一次只能添加一個cookie，除了第一個key/value對被認爲是cookie值保存外，其餘key/value對被認爲是該cookie的屬性。好比

document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();

　　上面的代碼被解釋爲cookie name在2016/1/6 11:44:30到期的

document.cookie = "name=chua;age=12";

　　上面的代碼解釋爲添加了一個cookie name=chua。這個cookie有一個屬性age=12。可是很明顯，age在cookie中沒有意義。由於cookie除了自己的鍵和值能獲取到，他相關的屬性沒法讀取，只有瀏覽器知道。

 　　如今來講說cookie的幾個屬性（不詳細講，主要是使用的注意事項）：

　　expires:絕對失效時間，時間格式只支持GTM標準時間，全部瀏覽器都支持

　　默認狀況下cookie是暫時存在的，他們存儲的值只在瀏覽器會話期間存在，當用戶退出瀏覽器後這些值也會丟失；若是指定 expires 值，那麼若是在時間沒有過時的狀況下cookie始終存在，即便關閉瀏覽器、關閉電腦。例子

document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();

　　max-age：相對失效時間，格式是數字，單位秒

　　說是expires如今已經被max-age屬性所取代，可是實際上本人測試至少IE是不支持max-age的。因此，max-age的使用範圍就只能說抱歉了。max-age和expires這兩個屬性控制cookie生命週期。 若是兩個都設置了，以max-age爲準

　　path：指定與cookie關聯在一塊兒的網頁

　　在默認的狀況下cookie會與建立它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯

　　domain:指定共享該cookie的域，只能是一個域內多個服務器共享cookie

　　domain屬性可使多個web服務器共享cookie。domain屬性的默認值是建立cookie的網頁所在服務器的主機名。不能將一個cookie的域設置成服務器所在的域以外的域。

　　news.baidu.com的服務器可以讀取www.baidu.com設置的cookie值。若是www.baidu.com的頁面建立的cookie把本身的path屬性設置爲「/」，把domain屬性設置成「.baidu.com」，那麼全部位於www.baidu.com，以及位於baidu.com域的其餘服務器上的網頁均可以訪問這個cookie。

　　secure:布爾值,傳輸類型（安全傳輸false/不安全傳輸true），默認是不安全傳輸

　　它是一個布爾值，指定在網絡上如何傳輸cookie，默認是不安全的，經過一個普通的http鏈接傳輸

　　HttpOnly：設爲true後，只能經過http訪問，不能經過document.cookie獲取。設定爲httponly的鍵值,防止xss讀取cookie。

　　

　　簡易cookie讀取函數

function getCookie(c_name){ 
        var cookie = document.cookie; 
        if (cookie.length>0){ 
                c_start = cookie.indexOf(encodeURIComponent(c_name) + "="); 
                if (c_start!=-1){ 
                        c_start = c_start + c_name.length+1; 
                        c_end = cookie.indexOf(";",c_start); 
                        if (c_end==-1) c_end = cookie.length; 
                        return decodeURIComponent(cookie.substring(c_start,c_end)) 
            } 
          } 
        return "" 
} 
function setCookie(c_name,value,expiredays){ 
        var exdate = new Date() 
        exdate.setDate(exdate.getDate()+expiredays); 
        document.cookie = encodeURIComponent(c_name)+ "=" + encodeURIComponent(value)+ 
                ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); 
}

 

　　若是以爲本文不錯，請點擊右下方【推薦】！