【什么是cookie】
“cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。”
——w3school
不同的瀏覽器可能對cookie的儲存方式不同，但是相同的是cookie中的內容都是保存在客戶一端的。（session是保存在服務器上的）
【cookie的幾點注意】
說的通俗一點，cookie就是一個字符串（這點可以用alert(typeof document.cookie)來驗證），用來保存一些客戶信息。
程序員可以對其寫入任何想寫入的東西，只要不超過cookie的大小限制（4kb）。
cookie的操作辦法最簡單的說法就是對document.cookie進行操作（寫入你要需保存的內容）。
cookie有一個關鍵字是expires，它是用來設置cookie的有效期的，默認情況（不設置expires）是當瀏覽器關閉的時候，自動清除cookie。
一般來說，cookie的形式都是這樣的："cookieName1=cookie1;cookieName2=cookie2;expires=" + date，這里需要注意幾點：
1.注意分號
";expires="之前的字符串你可以隨便寫，但是";expires="必須遵循這個寫法，尤其是這個分號不能少，不然瀏覽器是認不出你的expires（過期時間），而把它當成cookie內容的一部分。
例如：
如果你寫成
1 <html> 2 <head> 3 <script type="text/javascript"> 4 var date = new Date(); 5 date.setDate(date.getDate() + 10); //date設置為十天之后 6 document.cookie = "username=findingsea^password=123^expires=" + date.toGMTString(); //toGMTString方法將date轉換成格林尼治時間格式 7 </script> 8 </head> 9 <body> 10 11 </body> 12 </html>
打開firefox下的選項-->隱私-->刪除私人Cookie
可以到cookie過期的時間為當前會話結束時，也就是瀏覽器關閉的時候。換而言之，就是我們設置的expires完全沒有起作用。
要fix也很容易，只要在上段代碼中，在expires前加一個分號，也就是改成"...^;expires="，重新運行firefox查看cookie
可以看到過期時間為10之后（今天是2012年8月31日），expires設置成功，所以說分號很重要，很重要！！！
2.如何清除cookie
其實清除cookie這種說法是不准確的，應該是說讓cookie過期。因為不能直接對cookie置空，（如果以為document.cookie=""，這樣就能清空cookie，我只能說少年你還是太天真了），而使cookie的方法也很簡單，就是設置expires。我們可以把expires設置到很久以后，讓cookie能長期保存，那同樣我們也能把cookie設置到過去，讓cookie馬上過期。這個“過去”就是1970年1月1號，我們將expires設置到這個時間，cookie就過期了。至於為什么是這個時間，請參考關於1970-1-1 00:00.000的知識 。
3.如何設置和獲取cookie
<在一條cookie中設置多個變量>
JavaScript沒有提供根據cookie名來獲取cookie值的方法。上面已經講過了，document.cookie只是一個字符串而已，我們就對其進行字符串解析即可。要在獲取的時候進行解析，就要需要在設置的時候設置標識符，這里需要注意的點和第一點剛好相反，在第一點中，我們是千叮嚀萬囑咐不要忘記分號，而且在設置標識符的時候，我建議盡量不要用分號當做分隔符，我們來看一下對比；
代碼1：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 var date = new Date(); 5 date.setDate(date.getDate() + 10); 6 document.cookie = "username=findingsea;password=123;expires=" + date.toGMTString(); 7 </script> 8 </head> 9 <body> 10 11 </body> 12 </html>
效果：
代碼2：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 var date = new Date(); 5 date.setDate(date.getDate() + 10); 6 document.cookie = "username=findingsea^password=123^;expires=" + date.toGMTString(); 7 </script> 8 </head> 9 <body> 10 11 </body> 12 </html>
效果：
可以很清楚地看到，代碼1中的password=123都“吞掉了”，造成這個現象的原因是，瀏覽器在保存cookie的時候，在讀到分號之后，就認為cookie的內容結束了，瀏覽器理想的cookie形式是"cookieName=cookie;expires=date"，但是顯然我們並不滿足這樣，所以要在一條cookie中設置多個值，就需要像代碼2這樣用標示符（不要分號）進行分割。然后在讀取的時候，也根據標示符進行逐個讀取。
<設置多個cookie>
當然當然當然，以上是正對相對復雜的需要我們在同一條cookie中設置多個變量的情況，更規范的情況是一條cookie就儲存一個對象。不過這樣的話，你的cookie就要占用更多的空間（相比於一條cookie中設置多個變量而已，因為你需要為每個cookie都設置一個expires）。不過這樣的操作更加簡單和規范，推薦在變量少的情況下使用。
代碼如下：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 var date = new Date(); 5 date.setDate(date.getDate() + 10); 6 document.cookie = "username=findingsea;expires=" + date.toGMTString(); 7 document.cookie = "password=123;expires=" + date.toGMTString(); 8 alert(document.cookie) 9 </script> 10 </head> 11 <body> 12 13 </body> 14 </html>
效果：
那這時候document.cookie里的值是多少？讓我們alert一下：
這個時候，你再去解析cookie的時候，就要用分號作為分隔符了。
4.如何修改cookie
document.cookie雖然是一個字符串，但是當你對它的內容進行修改的時候，瀏覽器先進行解析和查詢，而不是直接的覆蓋和修改。如果你要修改的cookie已經存在，那瀏覽器就對已存在的那個cookie進行修改，否則，瀏覽器會按照你的cookie名和cookie值新建一個cookie。
代碼：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 var date = new Date(); 5 date.setDate(date.getDate() + 10); 6 document.cookie = "username=findingsea;expires=" + date.toGMTString(); 7 document.cookie = "username=ly;expires=" + date.toGMTString(); 8 document.cookie = "password=123;expires=" + date.toGMTString(); 9 alert(document.cookie) 10 </script> 11 </head> 12 <body> 13 14 </body> 15 </html>
效果：
可以看到當遇到之間已經定義過的cookie（username），瀏覽器會自己修改原來儲存的值，而如果該cookie之間沒有定義過（password），瀏覽器則會創建一個新的cookie。
5.chrome不支持本地cookie
chrome處於安全性考慮，不需要設置本地cookie，而需要用online-cookie。類似document.cookie=blablabla這樣的代碼在chrome下是無效的，cookie里還是空的，我也是上網上找了很多方法，都說要用online-cookie，但是也沒人告訴我online-cookie到底要怎么用。所以這個問題至今沒有解決，不過我會繼續找解決辦法，等我找到了再更新上來。
<-- 8月31日14:36更新 -->
感謝知乎大神對我這個弱智問題的不吝賜教，原帖地址。在此我犯了一個比較2的錯誤，chrome不支持本地cookie的意思是，不支持通過文件路徑訪問的js的cookie，就好比我寫個html文件放在本地，里面有創建cookie的代碼，直接用chrome打開這個html文件，創建cookie的代碼是不會執行成功的，因為chrome阻止了對document.cookie的賦值。想要解決這個問題也很簡單，就是通過127.0.0.1來訪問同一個文件，那你創建cookie的js代碼就能正常執行了。
【talk is cheap, show me the code.】
OK，上code！（代碼來自w3school的js操作cookie教程，經本人整理和個性化：））
1 <!-- 記住密碼 --> 2 <html> 3 <head> 4 <script type="text/javascript"> 5 6 function getCookie(c_name) //根據分隔符每個變量的值 7 { 8 if (document.cookie.length > 0) { 9 c_start = document.cookie.indexOf(c_name + "=") 10 if (c_start != -1) { 11 c_start = c_start + c_name.length + 1; 12 c_end = document.cookie.indexOf("^",c_start); 13 if (c_end==-1) 14 c_end=document.cookie.length; 15 return unescape(document.cookie.substring(c_start,c_end)); 16 } 17 } 18 return ""; 19 } 20 21 function setCookie(c_name, n_value, p_name, p_value, expiredays) //設置cookie 22 { 23 var exdate = new Date(); 24 exdate.setDate(exdate.getDate() + expiredays); 25 document.cookie = c_name + "=" + escape(n_value) + "^" + p_name + "=" + escape(p_value) + ((expiredays == null) ? "" : "^;expires=" + exdate.toGMTString()); 26 console.log(document.cookie) 27 } 28 29 function checkCookie() //檢測cookie是否存在，如果存在則直接讀取，否則創建新的cookie 30 { 31 alert(document.cookie) 32 var username = getCookie('username'); 33 var password = getCookie('password'); 34 if (username != null && username != "" && password != null && password != "") { 35 alert('Your name: ' + username + '\n' + 'Your password: ' + password); 36 } 37 else { 38 username = prompt('Please enter your name:',""); 39 password = prompt('Please enter your name:',""); 40 if (username != null && username != "" && password != null && password != "") 41 { 42 setCookie('username', username, 'password', password, 365); 43 } 44 } 45 alert(document.cookie) 46 } 47 48 function cleanCookie (c_name, p_name) { //使cookie過期 49 document.cookie = c_name + "=" + ";" + p_name + "=" + ";expires=Thu, 01-Jan-70 00:00:01 GMT"; 50 } 51 </script> 52 </head> 53 54 <body onLoad="checkCookie()"> 55 </body> 56 </html>