非常不錯的[JS]Cookie精通之路第1/2頁
更新時間:2008年06月26日 08:55:56 作者:
Cookies,有些人喜歡它們,有些人憎恨它們。但是,很少有人真正知道如何使用它們。現(xiàn)在你可以成為少數(shù)人中的成員-可以自傲的
Cookie 大師。
如果你象作者一樣記性不好,那么你可能根本記不住人們的名字。我遇到人時,多半只是點(diǎn)點(diǎn)頭,問句“吃了嘛!”,而且期望問候到此為止
。如果還需要表示些什么,那么我就得求助于一些狡猾的技巧,好讓我能想對方是誰。比如胡扯起一些和對方有關(guān)的人,不管他們之間關(guān)系多
遠(yuǎn),只要能避免不記得對方名字的尷尬就好: “你隔壁鄰居的侄子的可愛小狗邁菲斯特怎么樣?”通過這個方法,我希望能讓對方感到,我確
實很重視他(她),甚至還記得這些瑣事,雖然實際上連名字都忘記了。但是,不是我不重視,而是我的記憶力實在是糟糕,而且要記住的名
字又實在太多。如果我能給每個人設(shè)置cookies,那么我就不會再犯這種記憶力問題了。
在這篇文章里,我們要學(xué)習(xí):
1. 什么是 Cookies?
2. Cookie 的構(gòu)成
3. 操縱 Cookies
4. Cookie 怪獸
什么是Cookies?
你會問,什么是cookies呢? cookie 是瀏覽器保存在用戶計算機(jī)上的少量數(shù)據(jù)。它與特定的WEB頁或WEB站點(diǎn)關(guān)聯(lián)起來,自動地在WEB瀏覽器和
WEB服務(wù)器之間傳遞。
比如,如果你運(yùn)行的是Windows操作系統(tǒng),使用Internet Explorer上網(wǎng),那么你會發(fā)現(xiàn)在你的“Windows”目錄下面有一個子目錄,叫做
“Temporary Internet Files”。如果你有空看看這個目錄,就會發(fā)現(xiàn)里面有一些文件,文件名稱看起來就象電子郵件地址。比如在我機(jī)器上
的這個目錄里,就有 “jim@support.microsoft.com”這樣的文件。這是一個cookie 文件,這個文件從哪來呢?猜一猜,它來自微軟的支持站
點(diǎn)。順便說一句,這不是我的電子郵件地址,特此澄清。
對于管理細(xì)小的、不重要的、不想保存在中央數(shù)據(jù)庫里的細(xì)節(jié)信息,Cookies 是個很不錯的方案。(這不是說大家的名字不重要。)比如,目
前網(wǎng)站上不斷增長的自定義服務(wù),可以為每個用戶定制他們要看的內(nèi)容。如果你設(shè)計的就是這樣一個站點(diǎn),那么你怎么來管理這樣的信息:一
個用戶喜歡綠色的菜單條,而另一個喜歡紅色的。確實是個累人的問題。不過,這樣的信息,可以很安全地記錄到cookie,并保存在用戶的計
算機(jī)上,而你自己的數(shù)據(jù)庫空間可以留給更長久更有意義的數(shù)據(jù)。
FYI: Cookies 對于安全用途,通常很有用。我不想在此就這一問題過于深入,只是提供一個示例,可以看到如何使用在一段時間之后過期的
cookies來保證站點(diǎn)安全:
1. 使用用戶名和口令,通過 SSL 登錄。
2. 在服務(wù)器的數(shù)據(jù)庫里檢查用戶名和口令。如果登錄成功,建立一個當(dāng)前時間標(biāo)簽的消息摘要 (比如 MD5) ,并把它保存在cookie和服務(wù)器數(shù)
據(jù)庫里。把用戶的登錄時間保存在服務(wù)器數(shù)據(jù)庫里面的用戶記錄里。
3. 在進(jìn)行每個安全事務(wù)時(用戶處于登錄狀態(tài)的任何事務(wù)),把cookie的消息摘要和保存在服務(wù)器數(shù)據(jù)庫里的摘要進(jìn)行比較,如果比較失敗,
就把用戶引導(dǎo)到登錄界面。
4. 如果第3步檢查通過,那么檢查當(dāng)前時間和登錄時間之音經(jīng)過的時間是否超過允許的時間長度。如果用戶已經(jīng)超時,那么就把用戶引到登錄
界面。
5. 如果第3步和第4步都通過了,那么把登錄時間重新設(shè)置成當(dāng)前時間,允許事務(wù)發(fā)生。那些需要你登錄的安全站點(diǎn),可能多數(shù)使用的都是和這
里介紹的類似的方法。
Cookie的構(gòu)成
Cookies最初設(shè)計時,是為了CGI編程。但是,我們也可以使用Javascript腳本來操縱cookies。在本文里,我們將演示如何使用Javascript腳本
來操縱cookies。(如果有需求,我可能會在以后的文章里介紹如何使用Perl進(jìn)行cookie管理。但是如果實在等不得,那么我現(xiàn)在就教你一手:
仔細(xì)看看CGI.pm。在這個CGI包里有一個cookie()函數(shù),可以用它建立cookie。但是,還是讓我們先來介紹cookies的本質(zhì)。
在Javascript腳本里,一個cookie 實際就是一個字符串屬性。當(dāng)你讀取cookie的值時,就得到一個字符串,里面當(dāng)前WEB頁使用的所有cookies
的名稱和值。每個cookie除了name名稱和value值這兩個屬性以外,還有四個屬性。這些屬性是: expires過期時間、 path路徑、 domain域、
以及 secure安全。
Expires – 過期時間。指定cookie的生命期。具體是值是過期日期。如果想讓cookie的存在期限超過當(dāng)前瀏覽器會話時間,就必須使用這個屬
性。當(dāng)過了到期日期時,瀏覽器就可以刪除cookie文件,沒有任何影響。
Path – 路徑。指定與cookie關(guān)聯(lián)的WEB頁。值可以是一個目錄,或者是一個路徑。如果http://www.zdnet.com/devhead/index.html 建立了一
個cookie,那么在http://www.zdnet.com/devhead/目錄里的所有頁面,以及該目錄下面任何子目錄里的頁面都可以訪問這個cookie。這就是說
,在http://www.zdnet.com/devhead/stories/articles 里的任何頁面都可以訪問http://www.zdnet.com/devhead/index.html建立的cookie。
但是,如果http://www.zdnet.com/zdnn/ 需要訪問http://www.zdnet.com/devhead/index.html設(shè)置的cookes,該怎么辦?這時,我們要把
cookies 的path屬性設(shè)置成“/”。在指定路徑的時候,凡是來自同一服務(wù)器,URL里有相同路徑的所有WEB頁面都可以共享cookies?,F(xiàn)在看另
一個例子:如果想讓 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共享cookies,就要把path設(shè)成“
/devhead”。
Domain – 域。指定關(guān)聯(lián)的WEB服務(wù)器或域。值是域名,比如zdnet.com。這是對path路徑屬性的一個延伸。如果我們想讓
catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設(shè)置的cookies,該怎么辦? 我們可以把domain屬性設(shè)置成“mycompany.com”
,并把path屬性設(shè)置成“/”。FYI:不能把cookies域?qū)傩栽O(shè)置成與設(shè)置它的服務(wù)器的所在域不同的值。
Secure – 安全。指定cookie的值通過網(wǎng)絡(luò)如何在用戶和WEB服務(wù)器之間傳遞。這個屬性的值或者是“secure”,或者為空。缺省情況下,該屬
性為空,也就是使用不安全的HTTP連接傳遞數(shù)據(jù)。如果一個 cookie 標(biāo)記為secure,那么,它與WEB服務(wù)器之間就通過HTTPS或者其它安全協(xié)議
傳遞數(shù)據(jù)。不過,設(shè)置了secure屬性不代表其他人不能看到你機(jī)器本地保存的cookie。換句話說,把cookie設(shè)置為secure,只保證cookie與WEB
服務(wù)器之間的數(shù)據(jù)傳輸過程加密,而保存在本地的cookie文件并不加密。如果想讓本地cookie也加密,得自己加密數(shù)據(jù)。
操縱Cookies
請記住,cookie就是文檔的一個字符串屬性。要保存cookie,只要建立一個字符串,格式是name=<value>(名稱=值),然后把文檔的
document.cookie 設(shè)置成與它相等即可。比如,假設(shè)想保存表單接收到的用戶名,那么代碼看起來就象這樣:
document.cookie = "username" + escape(form.username.value);
在這里,使用 escape() 函數(shù)非常重要,因為cookie值里可能包含分號、逗號或者空格。這就是說,在讀取cookie值時,必須使用對應(yīng)的
unescape()函數(shù)給值解碼。
我們當(dāng)然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字符串值后面:
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]
<value>, <date>, <domain> 和 <path> 應(yīng)當(dāng)用對應(yīng)的值替換。<date> 應(yīng)當(dāng)使用GMT格式,可以使用Javascript腳本語言的日期類Date
的.toGMTString() 方法得到這一GMT格式的日期值。方括號代表這項是可選的。比如在 [; secure]兩邊的方括號代表要想把cookie設(shè)置成安全
的,就需要把"; secure" 加到cookie字符串值的后面。如果"; secure" 沒有加到cookie字符串后面,那么這個cookie就是不安全的。不要把
尖括號<> 和方括號[] 加到cookie里(除非它們是某些值的內(nèi)容)。設(shè)置屬性時,不限屬性,可以用任何順序設(shè)置。
下面是一個例子,在這個例子里,cookie "username" 被設(shè)置成在15分鐘之后過期,可以被服務(wù)器上的所有目錄訪問,可以被"mydomain.com"
域里的所有服務(wù)器訪問,安全狀態(tài)為安全。
。如果還需要表示些什么,那么我就得求助于一些狡猾的技巧,好讓我能想對方是誰。比如胡扯起一些和對方有關(guān)的人,不管他們之間關(guān)系多
遠(yuǎn),只要能避免不記得對方名字的尷尬就好: “你隔壁鄰居的侄子的可愛小狗邁菲斯特怎么樣?”通過這個方法,我希望能讓對方感到,我確
實很重視他(她),甚至還記得這些瑣事,雖然實際上連名字都忘記了。但是,不是我不重視,而是我的記憶力實在是糟糕,而且要記住的名
字又實在太多。如果我能給每個人設(shè)置cookies,那么我就不會再犯這種記憶力問題了。
在這篇文章里,我們要學(xué)習(xí):
1. 什么是 Cookies?
2. Cookie 的構(gòu)成
3. 操縱 Cookies
4. Cookie 怪獸
什么是Cookies?
你會問,什么是cookies呢? cookie 是瀏覽器保存在用戶計算機(jī)上的少量數(shù)據(jù)。它與特定的WEB頁或WEB站點(diǎn)關(guān)聯(lián)起來,自動地在WEB瀏覽器和
WEB服務(wù)器之間傳遞。
比如,如果你運(yùn)行的是Windows操作系統(tǒng),使用Internet Explorer上網(wǎng),那么你會發(fā)現(xiàn)在你的“Windows”目錄下面有一個子目錄,叫做
“Temporary Internet Files”。如果你有空看看這個目錄,就會發(fā)現(xiàn)里面有一些文件,文件名稱看起來就象電子郵件地址。比如在我機(jī)器上
的這個目錄里,就有 “jim@support.microsoft.com”這樣的文件。這是一個cookie 文件,這個文件從哪來呢?猜一猜,它來自微軟的支持站
點(diǎn)。順便說一句,這不是我的電子郵件地址,特此澄清。
對于管理細(xì)小的、不重要的、不想保存在中央數(shù)據(jù)庫里的細(xì)節(jié)信息,Cookies 是個很不錯的方案。(這不是說大家的名字不重要。)比如,目
前網(wǎng)站上不斷增長的自定義服務(wù),可以為每個用戶定制他們要看的內(nèi)容。如果你設(shè)計的就是這樣一個站點(diǎn),那么你怎么來管理這樣的信息:一
個用戶喜歡綠色的菜單條,而另一個喜歡紅色的。確實是個累人的問題。不過,這樣的信息,可以很安全地記錄到cookie,并保存在用戶的計
算機(jī)上,而你自己的數(shù)據(jù)庫空間可以留給更長久更有意義的數(shù)據(jù)。
FYI: Cookies 對于安全用途,通常很有用。我不想在此就這一問題過于深入,只是提供一個示例,可以看到如何使用在一段時間之后過期的
cookies來保證站點(diǎn)安全:
1. 使用用戶名和口令,通過 SSL 登錄。
2. 在服務(wù)器的數(shù)據(jù)庫里檢查用戶名和口令。如果登錄成功,建立一個當(dāng)前時間標(biāo)簽的消息摘要 (比如 MD5) ,并把它保存在cookie和服務(wù)器數(shù)
據(jù)庫里。把用戶的登錄時間保存在服務(wù)器數(shù)據(jù)庫里面的用戶記錄里。
3. 在進(jìn)行每個安全事務(wù)時(用戶處于登錄狀態(tài)的任何事務(wù)),把cookie的消息摘要和保存在服務(wù)器數(shù)據(jù)庫里的摘要進(jìn)行比較,如果比較失敗,
就把用戶引導(dǎo)到登錄界面。
4. 如果第3步檢查通過,那么檢查當(dāng)前時間和登錄時間之音經(jīng)過的時間是否超過允許的時間長度。如果用戶已經(jīng)超時,那么就把用戶引到登錄
界面。
5. 如果第3步和第4步都通過了,那么把登錄時間重新設(shè)置成當(dāng)前時間,允許事務(wù)發(fā)生。那些需要你登錄的安全站點(diǎn),可能多數(shù)使用的都是和這
里介紹的類似的方法。
Cookie的構(gòu)成
Cookies最初設(shè)計時,是為了CGI編程。但是,我們也可以使用Javascript腳本來操縱cookies。在本文里,我們將演示如何使用Javascript腳本
來操縱cookies。(如果有需求,我可能會在以后的文章里介紹如何使用Perl進(jìn)行cookie管理。但是如果實在等不得,那么我現(xiàn)在就教你一手:
仔細(xì)看看CGI.pm。在這個CGI包里有一個cookie()函數(shù),可以用它建立cookie。但是,還是讓我們先來介紹cookies的本質(zhì)。
在Javascript腳本里,一個cookie 實際就是一個字符串屬性。當(dāng)你讀取cookie的值時,就得到一個字符串,里面當(dāng)前WEB頁使用的所有cookies
的名稱和值。每個cookie除了name名稱和value值這兩個屬性以外,還有四個屬性。這些屬性是: expires過期時間、 path路徑、 domain域、
以及 secure安全。
Expires – 過期時間。指定cookie的生命期。具體是值是過期日期。如果想讓cookie的存在期限超過當(dāng)前瀏覽器會話時間,就必須使用這個屬
性。當(dāng)過了到期日期時,瀏覽器就可以刪除cookie文件,沒有任何影響。
Path – 路徑。指定與cookie關(guān)聯(lián)的WEB頁。值可以是一個目錄,或者是一個路徑。如果http://www.zdnet.com/devhead/index.html 建立了一
個cookie,那么在http://www.zdnet.com/devhead/目錄里的所有頁面,以及該目錄下面任何子目錄里的頁面都可以訪問這個cookie。這就是說
,在http://www.zdnet.com/devhead/stories/articles 里的任何頁面都可以訪問http://www.zdnet.com/devhead/index.html建立的cookie。
但是,如果http://www.zdnet.com/zdnn/ 需要訪問http://www.zdnet.com/devhead/index.html設(shè)置的cookes,該怎么辦?這時,我們要把
cookies 的path屬性設(shè)置成“/”。在指定路徑的時候,凡是來自同一服務(wù)器,URL里有相同路徑的所有WEB頁面都可以共享cookies?,F(xiàn)在看另
一個例子:如果想讓 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共享cookies,就要把path設(shè)成“
/devhead”。
Domain – 域。指定關(guān)聯(lián)的WEB服務(wù)器或域。值是域名,比如zdnet.com。這是對path路徑屬性的一個延伸。如果我們想讓
catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設(shè)置的cookies,該怎么辦? 我們可以把domain屬性設(shè)置成“mycompany.com”
,并把path屬性設(shè)置成“/”。FYI:不能把cookies域?qū)傩栽O(shè)置成與設(shè)置它的服務(wù)器的所在域不同的值。
Secure – 安全。指定cookie的值通過網(wǎng)絡(luò)如何在用戶和WEB服務(wù)器之間傳遞。這個屬性的值或者是“secure”,或者為空。缺省情況下,該屬
性為空,也就是使用不安全的HTTP連接傳遞數(shù)據(jù)。如果一個 cookie 標(biāo)記為secure,那么,它與WEB服務(wù)器之間就通過HTTPS或者其它安全協(xié)議
傳遞數(shù)據(jù)。不過,設(shè)置了secure屬性不代表其他人不能看到你機(jī)器本地保存的cookie。換句話說,把cookie設(shè)置為secure,只保證cookie與WEB
服務(wù)器之間的數(shù)據(jù)傳輸過程加密,而保存在本地的cookie文件并不加密。如果想讓本地cookie也加密,得自己加密數(shù)據(jù)。
操縱Cookies
請記住,cookie就是文檔的一個字符串屬性。要保存cookie,只要建立一個字符串,格式是name=<value>(名稱=值),然后把文檔的
document.cookie 設(shè)置成與它相等即可。比如,假設(shè)想保存表單接收到的用戶名,那么代碼看起來就象這樣:
document.cookie = "username" + escape(form.username.value);
在這里,使用 escape() 函數(shù)非常重要,因為cookie值里可能包含分號、逗號或者空格。這就是說,在讀取cookie值時,必須使用對應(yīng)的
unescape()函數(shù)給值解碼。
我們當(dāng)然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字符串值后面:
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]
<value>, <date>, <domain> 和 <path> 應(yīng)當(dāng)用對應(yīng)的值替換。<date> 應(yīng)當(dāng)使用GMT格式,可以使用Javascript腳本語言的日期類Date
的.toGMTString() 方法得到這一GMT格式的日期值。方括號代表這項是可選的。比如在 [; secure]兩邊的方括號代表要想把cookie設(shè)置成安全
的,就需要把"; secure" 加到cookie字符串值的后面。如果"; secure" 沒有加到cookie字符串后面,那么這個cookie就是不安全的。不要把
尖括號<> 和方括號[] 加到cookie里(除非它們是某些值的內(nèi)容)。設(shè)置屬性時,不限屬性,可以用任何順序設(shè)置。
下面是一個例子,在這個例子里,cookie "username" 被設(shè)置成在15分鐘之后過期,可以被服務(wù)器上的所有目錄訪問,可以被"mydomain.com"
域里的所有服務(wù)器訪問,安全狀態(tài)為安全。
您可能感興趣的文章:
- 什么是cookie?js手動創(chuàng)建和存儲cookie
- js中的cookie的讀寫操作示例詳解
- jsp使用cookie存儲中文示例分享
- js文件Cookie存取值示例代碼
- js獲取指定的cookie的具體實現(xiàn)
- 用js正確判斷用戶名cookie是否存在的方法
- httpclient模擬登陸具體實現(xiàn)(使用js設(shè)置cookie)
- JS保存和刪除cookie操作 判斷cookie是否存在
- js設(shè)置cookie過期及清除瀏覽器對應(yīng)名稱的cookie
- js中cookie的添加、取值、刪除示例代碼
- js讀寫(刪除)Cookie實例詳解
- JS操作Cookies包括(讀取添加與刪除)
- JS讀取cookies信息(記錄用戶名)
- jquery.cookie.js 操作cookie實現(xiàn)記住密碼功能的實現(xiàn)代碼
- js讀寫COOKIE實現(xiàn)記住帳號或密碼的代碼(js讀寫COOKIE)
- asp.net通過js實現(xiàn)Cookie創(chuàng)建以及清除Cookie數(shù)組的代碼
- js cookies實現(xiàn)簡單統(tǒng)計訪問次數(shù)
- 靜態(tài)頁面利用JS讀取cookies記住用戶信息
- js中cookie的使用詳細(xì)分析
- javascript js cookie的存儲,獲取和刪除
- 用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說明
相關(guān)文章
Angular組件拿不到@Input輸入屬性問題探究解決方法
最近在工作中實現(xiàn)一個feature的時候,碰到一個小問題:Angular組件拿不到@Input輸入屬性的問題,盡管對這些問題都比較了解,但是找問題是需要一個過程的,所以還是把這個問題總結(jié)記錄了下2023-01-01
JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-07-07
前端報錯Failed?to?resolve?component:?smile-outlined?If?thi
這篇文章主要為大家介紹了前端報錯?Failed?to?resolve?component:?smile-outlined?If?this?is?a?native?custom?的問題分析解決,有需要的朋友可以借鑒參考下2023-06-06
如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題
這篇文章主要介紹了如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題。SyntheticEvent對象是通過合并得到的。 這意味著在事件回調(diào)被調(diào)用后,SyntheticEvent 對象將被重用并且所有屬性都將被取消。 因此,您無法以異步方式訪問該事件。,需要的朋友可以參考下2019-06-06

