天天看點

java存儲cookie_JavaScript是如何存儲cookie

從事java也有些日子了,cookie 是個啥差不多能說明白,可是實際自己一上手操作就是得去搜尋(你們懂的),結果被鄙視了...是以就寫一篇博文做為自己的學習筆記,嘿嘿,部落格的好處在此展現出來了。

java存儲cookie_JavaScript是如何存儲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,曾經我以為是array,還鬧過笑話...囧

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 進行讀取其實很簡單,就是對字元串進行操作。

當然想實作讀取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 失效,通過把有效期的時間設定為一個已過期的時間。既然已經有了設定有效期的方法,那麼設定失效期的方法就請感興趣的朋友自己動手了^_^。下面繼續比較深的cookie話題。

Cookie 進階篇

一.cookie 路徑概念

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

cookie 一般都是由于使用者通路頁面而被建立的,可是并不是隻有在建立 cookie 的頁面才可以通路這個 cookie。

預設情況下,隻有與建立 cookie 的頁面在同一個目錄或子目錄下的網頁才可以通路,這個是因為安全方面的考慮,造成不是所有頁面都可以随意通路其他頁面建立的 cookie。

二.cookie 域概念

路徑能解決在同一個域下通路 cookie 的問題,咱們接着說 cookie 實作同域之間通路的問題。文法如下:

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

注:一定的是同域之間的通路,不能把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 資訊的存儲都是采用未編碼的方式。是以,在設定 cookie 資訊以前要先使用escape()函數将 cookie 值資訊進行編碼,在擷取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設定cookie時:

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

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

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

這樣就不用擔心因為在cookie值中出現了特殊符号而導緻 cookie 資訊出錯了。

總結

在工作中越來越感覺到基礎的重要性了,有很多技術細節都是要懂不懂或者的懂的不多。為了改善這種情況,打算以後會對知識的細節從點到面的去了解,然後再寫部落格加深印象,也能分享給更多有需要的朋友。

如果覺得這文章還算用心,請勞駕點選右下角的推薦,這是對我們這些做分享的最大的肯定,謝謝。