今天動力節點java學院小編為大家介紹詳解JavaScript操作Cookie，本文主要講解什么是Cookie、Cookie基礎知識、Cookie常見問題、cookie 有兩種清除方式、Cookie基礎用法、Cookie高級用法等內容，希望通過此文能夠幫助到大家，下面就隨小編一起看看。

　　什么是Cookie

　“cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。”

　　cookie 是訪問過的網站創建的文件，用于存儲瀏覽信息，例如個人資料信息。

　　從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用于客戶端計算機與服務器之間傳遞信息。

　　在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由于 cookie 多用在客戶端和服務端之間進行通信，所以除了JavaScript以外，服務端的語言(如PHP)也可以存取 cookie。

　　Cookie 基礎知識

　　cookie 是有大小限制的，每個 cookie 所存放的數據不能超過4kb，如果 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。

　　由于 cookie 最終都是以文件形式存放在客戶端計算機中，所以查看和修改 cookie 都是很方便的，這就是為什么常說 cookie 不能存放重要信息的原因。

　　每個 cookie 的格式都是這樣的：=<值>;名稱和值都必須是合法的標示符。

　　cookie 是存在 有效期的。在默認情況下，一個 cookie 的生命周期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之后還可以使用，就必須要為該 cookie 設置有效期，也就是 cookie 的失效日期。

　　alert(typeof document.cookie)　　結果是 string。

　　cookie 有域和路徑這個概念。域就是domain的概念，因為瀏覽器是個注意安全的環境，所以不同的域 之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問。

　　其實創建cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ，而多個 cookie 可以存放在同一個cookie 文件中。

　　Cookie常見問題

　　cookie 存在兩種類型：

　　你瀏覽的當前網站本身設置的 cookie

　　來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用信息)

　　剛剛基礎知識里面有說到 cookie 生命周期的問題，其實 cookie 大致可分為兩種狀態：

　　臨時性質的cookie。當前使用的過程中網站會儲存一些你的個人信息，當瀏覽器關閉后這些信息也會從計算機中刪除

　　設置失效時間的cookie。就算瀏覽器關閉了，這些信息業依然會在計算機中。如 登錄名稱和密碼，這樣無須在每次到特定站點時都進行登錄。這種cookie 可在計算機中保留幾天、幾個月甚至幾年

　　cookie 有兩種清除方式：

　　通過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能)

　　通過設置 cookie 的有效期來清除 cookie

　　注：刪除 cookie 有時可能導致某些網頁無法正常運行

　　瀏覽器可以通過設置來接受和拒絕訪問 cookie。

　　出于功能和性能的原因考慮，建議盡量降低 cookie 的使用數量，并且要盡量使用小 cookie。

　　關于cookie編碼的細節問題將會在cookie高級篇中單獨介紹。

　　假如是本地磁盤中的頁面，chrome的控制臺是無法用JavaScript讀寫操作 cookie 的，解決辦法…換一個瀏覽器^_^。

　　Cookie基礎用法

　　簡單的存取操作

　　在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性;一行代碼介紹如何創建和修改一個 cookie ：

document.cookie  = 'username=Darren';

　　以上代碼中'username'表示 cookie 名稱，'Darren'表示這個名稱對應的值。假設 cookie 名稱并不存在，那么就是創建一個新的 cookie;如果存在就是修改了這個 cookie 名稱對應的值。如果要多次創建 cookie ，重復使用這個方法即可。

　　cookie的讀取操作

　　要精確的對 cookie 進行讀取其實很簡單，就是對字符串進行操作。

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的有效期

　　文章中常常出現的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在時間。在默認的情況下，cookie 會在瀏覽器關閉的時候自動清除，但是我們可以通過expires來設置 cookie 的有效期。語法如下：

　　document.cookie = "name=value;expires=date";

　　上面代碼中的date值為GMT(格林威治時間)格式的日期型字符串，生成方式如下：

var _date = new Date();

_date.setDate(_date.getDate()+30);

_date.toGMTString();

　　上面三行代碼分解為幾步來看：

　　通過new生成一個Date的實例，得到當前的時間;

　　getDate()方法得到當前本地月份中的某一天，接著加上30就是我希望這個cookie能過在本地保存30天;

　　接著通過setDate()方法來設置時間;

　　最后用toGMTString()方法把Date對象轉換為字符串，并返回結果

　　通過下面這個完整的函數來說明在創建 cookie 的過程中我們需要注意的地方，創建一個在 cookie 中存儲信息的函數：

function setCookie(c_name, value, expiredays){

    var exdate=new Date();

    exdate.setDate(exdate.getDate() + expiredays);

    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

//使用方法：setCookie('username','Darren',30)   

　　現在我們這個函數是按照天數來設置cookie的有效時間，如果想以其他單位(如：小時)來設置，那么改變第三行代碼即可：

exdate.setHours(exdate.getHours() + expiredays);

　　這樣設置以后的cookie有效期就是按照小時為單位的。

　　常見問題中有提到清除 cookie 的兩種方法，現在要說的是使 cookie 失效，通過把有效期的時間設置為一個已過期的時間。既然已經有了設置有效期的方法，那么設置失效期的方法就請感興趣的朋友自己動手了^_^。下面繼續比較深的cookie話題。

　　Cookie 高級篇

　   cookie 路徑概念

　　在基礎知識中有提到 cookie 有域和路徑的概念，現在來介紹路徑在 cookie 中的作用。

　　cookie 一般都是由于用戶訪問頁面而被創建的，可是并不是只有在創建 cookie 的頁面才可以訪問這個 cookie。

　　默認情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問，這個是因為安全方面的考慮，造成不是所有頁面都可以隨意訪問其他頁面創建的 cookie。

　　那么如何讓這個 cookie 能被其他目錄或者父級的目錄訪問類，通過設置 cookie 的路徑就可以實現。例子如下：

document.cookie = "name=value;path=path"

document.cookie = "name=value;expires=date;path=path"

　　紅色字體path就是 cookie 的路徑，最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面創建的 cookie，所有的頁面都可以訪問到了:

document.cookie = "name=Darren;path=/";

　   cookie 域概念

　　路徑能解決在同一個域下訪問 cookie 的問題，咱們接著說 cookie 實現同域之間訪問的問題。語法如下：

　　document.cookie = "name=value;path=path;domain=domain";

　　紅色的domain就是設置的 cookie 域的值。

例如 ”www.qq.com” 與 “sports.qq.com” 公用一個關聯的域名”qq.com”，我們如果想讓 “sports.qq.com” 下的cookie被 ”www.qq.com” 訪問，我們就需要用到 cookie 的domain屬性，并且需要把path屬性設置為 “/”。例：

　　document.cookie = "username=Darren;path=/;domain=qq.com";

　　注：一定的是同域之間的訪問，不能把domain的值設置成非主域的域名。

　　cookie 安全性

　　通常 cookie 信息都是使用HTTP連接傳遞數據，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那么就要求使用加密的數據傳輸。

　　所以 cookie 的這個屬性的名稱是“secure”，默認的值為空。如果一個 cookie 的屬性為secure，那么它與服務器之間就通過HTTPS或者其它安全協議傳遞數據。語法如下：

　　document.cookie = "username=Darren;secure"

　　把cookie設置為secure，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件并不加密。如果想讓本地cookie也加密，得自己加密數據。

　　注：就算設置了secure 屬性也并不代表他人不能看到你機器本地保存的 cookie 信息，所以說到底，別把重要信息放cookie就對了，

　　cookie 編碼細節

　　在輸入cookie信息時不能包含空格，分號，逗號等特殊符號，而在一般情況下，cookie 信息的存儲都是采用未編碼的方式。所以，在設置 cookie 信息以前要先使用escape()函數將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設置cookie時：

　　document.cookie = name + "="+ escape (value);

　　再看看基礎用法時提到過的getCookie()內的一句：

　　return unescape(document.cookie.substring(c_start,c_end));

　　這樣就不用擔心因為在cookie值中出現了特殊符號而導致 cookie 信息出錯了。

以上就是動力節點java學院小編介紹的“詳解JavaScript操作Cookie”的內容，希望對大家有幫助，更多java最新資訊請繼續關注動力節點java培訓機構官網，每天會有精彩內容分享與你。