一、什么是cookie
cookie也叫HTTP cookie,最初是用來客戶端和服務器端進行會話用的，由於HTTP是一種無狀態的協議，為了維持用戶和跟蹤用戶信息，所以引入了cookie和session，cookie主要是存放在客戶端，session是存放在服務器端的
二、cookie的限制
每個特定域名下面的cookie數量是有限制的，fixfox是50個，Opera是30個，chrome和safari是沒有限制的，並且每個cookie的限制最大是4K,如果cookie的內容超過4K的話，那么調用的時候就會返回一個空的字符串
這里要注意的是，假如cookie是存放在本地磁盤中的，那么chrome是無法在控制台進行輸出的，這個時候的解決方法是換一種瀏覽器試一試
PS：由於HTTP會在你每次發起網絡請求的時候就附帶上，所以出於功能和性能上面的考慮，應該盡量的減少cookie的使用數量，並且使用相對較小的cookie
三、cookie的基本使用
cookie 有域和路徑這個概念。域就是domain的概念，因為瀏覽器是個注意安全的環境，所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問
Document.cookie=name=value;[exprises=date];[path=path] []為可選內容
下面我們就來介紹通過一個小例子來介紹一下,cookie假設我們想要制作這樣一個功能，在用戶登陸界面的時候將用戶的個人信息存進cookie以便后期的使用，相關的代碼如下：
<html> <head> <title>模擬用戶登陸DEMO</title> <meta charset="utf-8" > </head> <body> <table> <tr> <td> <input id="user" placeholder="用戶名" type="text" style="width:200px;" /> </td> </tr> <tr> <td> <input id="pwd" placeholder="密碼" type="password" style="width:200px;"> </td> </tr> <tr> <td> <input onclick="btn_certain()" id="certain" value="確定" type="button" style="background:blue;color:white" /> </td> </tr> </table> </body> <script> function btn_certain(){ //獲取輸入控件的對象 var user=document.getElementById("user"); var pwd=document.getElementById("pwd"); //獲取點擊時候的值 var input_user=user.value; var input_pwd=pwd.value; console.log('uerName='+input_user); //將這兩個值分別寫入cookie中 document.cookie="uerName=123"; document.cookie="userPwd="+input_pwd; } //btn.onclick(function(){ //alert(1); //}); </script> </html>
運行一下結果如下：
從這里我們可以看到已經生成了兩個本地的cookie分別是userName和userPwd這兩個cookie，這里要注意的是在hcrome下面是無法查看本地cookie的，所以以上的示例是在fixfox下面查看的
不到到有沒有細心的同學發現，上面的例子中創建兩個cookie是通過重復doucment.cookie這個屬性的，但是這里有別於JavaScript中的字符串覆蓋這個概念，每創建一個cookie都要調用doucment.cookie，這樣只會創建cookie不會覆蓋掉之前的cookie內容
上面的例子除了闡述了怎樣去創建cookie，同時也是可以用來修改cookie的，修改cookie原理也是一樣的在你將字符串賦值給document.cookie的時候，如果是name沒有存在的時候，則創建一個新的cookie，如果是存在這個cookie則將這個cookie對應的value給更改了
已經說了新增和修改的實現，接下來就剩下刪除和查詢cookie
接着我們就從刪除來一步一步說起
刪除cookie
在cookie的操作之中我們是沒有辦法直接對cookie進行刪除的，但是我們可以換個方向去思考，因為cokie有一個有效的時間，那么如果我們讓cookie有效的時間處於過期的話，那么這個cookie相當於是不生效了，所以效果可以等同於被刪除了一樣(默認的cookie不設置時間的有效期是當你關閉瀏覽器的時候就過期了)
我們根據上面的例子添加一個按鈕和y一段觸發腳本，具體如下：
function btn_deleteUser(){ //獲取用戶輸入框的值 var user=document.getElementById("user"); var input=user.value; //創建時間對象並獲取當前時間 var date=new Date(); //將時間設置為當前時間的前一天 date.setDate(date.getDate()-1); //將時間轉換成為GMT格式 var time=date.toGMTString(); //給字段設置過期時間 document.cookie="uerName="+input+";expires="+time; }
這個腳本的思路就是可以實現對某個cookie進行刪除的功能
查找cookie
這里要查找某個cookie的值是否存在，這里我們具體要做得是，首先要判斷cookie的值是否空，然后就要判斷你輸入的cookie name是否存在，如果存在獲取它對應的value值，具體的代碼W3 School已經給出了，具體如下：
function getCookie(c_name){ if (document.cookie.length>0){ //先查詢cookie是否為空，為空就return "" c_start=document.cookie.indexOf(c_name + "=") //通過String對象的indexOf()來檢查這個cookie是否存在，不存在就為 -1 if (c_start!=-1){ c_start=c_start + c_name.length+1 //最后這個+1其實就是表示"="號啦，這樣就獲取到了cookie值的開始位置 c_end=document.cookie.indexOf(";",c_start) //其實我剛看見indexOf()第二個參數的時候猛然有點暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結束位置。因為需要考慮是否是最后一項，所以通過";"號是否存在來判斷 if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) //通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎，想了解的可以搜索下，在文章結尾處也會進行講解cookie編碼細節 } } return "" }
全部cookie的刪除
要實現全部cookie的刪除，按照我的實現思路是，首先要通過字符串切割的方法獲取每個如：name=value的字符串，然后對這些字符串進行 在每個切割后的小字符串后面加上一個過期的時間，這樣就可以實現cookie全部刪除了.
四、cookie的其他用法
cookie除了有exprise這個屬性之后還有path這個屬性，這個屬性是用來設置可訪問到cookie的路徑的，默認的是在當前cookie頁面的子目錄下是可以訪問到的，但是默認的情況下我們是無法再其他父目錄下面訪問到這個cookie，這個時候我們就可以通過設置cookie來實現這個功能
我們假設我們的文件是存放在 www.leslieyong.com/cn/dowload/index.html,那么默認在dowload目錄下面才可以訪問到cookie，這個時候我們可以通過設置path屬性來實現在www.leslieyong.com根目錄下面也可以訪問到的效果，具體如下：
document.cookie = "name=value;expires=date;path=/"
要實現在cn目錄下面可以訪問應該是這樣寫的
document.cookie = "name=value;expires=date;path=/cn/"
如上面所說，這樣做我們可以實現在同域之間的傳值，但是在跨域之間的傳值要怎樣實現呢，其實cookie除了有path，還存在domain，domain這個屬性是可以實現跨域的，但是必須保證這兩個域名有公共部分，何為公共部分？就是像www.qq.com和www.sport.qq.com 這樣都有相同的qq.com的域名，具體的使用方法是把domain設置為相同部分的域名，具體如下：
document.cookie = "name=value;expires=date;path=/;domain=qq.com"
另外在使用cookie的時候我們還需要注意的是cookie的編碼問題，因為在cookie是不支持逗號、空格、分號的，所以在設置cookie的時候，需要使用escape()將輸入的信息進行轉碼，然后在要調用的時候使用unescape()來重新轉換回來，這個輸入JavaScript的基礎知識點的范疇之內，不清楚的請自行百度