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()); 
}