1. 使用document對象的cookie屬性,可以讓你讀取、添加和更新文檔(當期HTML)所關聯的cookie。
2. 當你讀取document.cookie時,會得到當期文檔的所有cookie。
3. cookie的形式是如"name=value"的名值對。
4. 如果存在多個cookie一起返回,使用 ; 隔開。“name1=value1;name2=value2”。
所以對於添加和更新cookie的操作便是對document.cookie進行賦值,
如果新賦的名值對的名已經存在,瀏覽器就會認為這是一個更新操作,新值會覆蓋原先的值,
如果名不存在,則瀏覽器認為這是一個新增操作,就會把這個名值對寫進當前文檔的cookie里。
代碼示例如下:
1 <html> 2 <head> 3 <title>使用document對象操作cookie</title> 4 </head> 5 <body> 6 <p id="cookiedata"> 7 8 </p> 9 <button id="write">Add Cookie</button> 10 <button id="update">Update Cookie</button> 11 12 <script> 13 var cookieCount = 0; 14 document.getElementById("write").onclick = createCookie; 15 document.getElementById("update").onclick = updateCookie; 16 readCookies(); 17 18 // 讀取當前文檔的所有cookie 19 function readCookies(){ 20 document.getElementById("cookiedata").innerHTML = document.cookie.replace("Cookie_1"); 21 } 22 23 // 創建一個新的cookie 24 function createCookie(){ 25 cookieCount ++; 26 document.cookie = "Cookie_" + cookieCount + "=Value_" + cookieCount; 27 readCookies(); 28 } 29 30 // 修改cookie名為Cookie_cookieCount的值為Updated_cookieCount 31 function updateCookie(){ 32 document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount; 33 readCookies(); 34 } 35 </script> 36 </body> 37 </html>
document對象讀取cookie沒有直接提供可以根據cookie名獲取指定cookie的方法。所以就需要自己從拿到的所有cookie中去獲取。思路就是使用字符串的分割。
當然,已經有更方便的庫來提供對cookie的操作。例如jQuery cookie。具體的使用很簡單,可以上網百度一下,也可以看我寫的一個簡單介紹:http://www.cnblogs.com/enjoymylift/p/5993286.html。