javascript
JavaScript： Cookie 详解、实例与应用
Cookie（也）是JavaScript中的一種機制，可以實現嚴格的跨頁面全局變量的要求。
Cookie是存于用戶硬盤的一個文件，這個文件通常對應于一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。
在Cookie設置中，用escape()函數進行編碼，可避免亂碼和特殊字符問題; 當使用escape()編碼后，在取出值以后需要使用unescape()進行解碼才能得到原來的cookie值。
設置Cookie時可以直接給document.cookie賦值：
2document.cookie="userName=hulk";
而且后面的值不會覆蓋前面的值，它具有一種累加機制。
cookie的值可以由document.cookie直接獲得，但這樣獲取的是所有的cookie值；要通過一指定cookie名稱來獲得所對應的值，則需做一些處理。
構造通用的cookie處理函數：
?2?/**//***
?3?*?設置Cookie?（通用函數）
?4?*?@param?{string}?cookieName?Cookie?名稱
?5?*?@param?{string}?cookieValue?Cookie?值
?6?*?@param?{string}?nDays?Cookie?過期天數
?7?*/
?8?function?SetCookie(cookieName,?cookieValue,?nDays)
?9?{
10?????/**//*?當前日期?*/
11?????var?today?=?new?Date();
12?
13?????/**//*?Cookie?過期時間?*/
14?????var?expire?=?new?Date();
15
16?????/**//*?如果未設置nDays參數或者nDays為0，取默認值?1?*/
17?????if(nDays?==?null?||?nDays?==?0)?
18????????nDays?=?1;
19?????
20??????/**//*?計算Cookie過期時間?*/
21??????expire.setTime(today.getTime()?+?nDays?*?24?*?60?*?60?*?1000);?//獲取毫秒數
22???????
23??????/**//*?設置Cookie值?*/
24??????document.cookie?=?cookieName?+?"="?+?escape(cookieValue)?+?";expires="?+?expire.toGMTString();
25?}?
26
??
?? 下面我來編寫一個登錄函數，加強理解和應用
?2?function?login()
?3?{
?4????//?用戶名
?5????var?username?=?$("user").value;
?6????
?7????//?用戶密碼
?8????var?password?=?$("pass").value;
?9
10????//?我們這里設置一額外條件，交友登錄用戶選擇
11?????//?是否7天內無需再登錄，即可訪問
12?????var?save?=?$("save").checked;
13????
14????//?這里，假設一合法的用戶名/密碼是?admin/admin
15????if(username?==?"admin"?&&?password?==?"admin")
16????{
17???????//?在Cookie中保存用戶名
18????????if(save)?
19??????????SetCookie("username",username,7);
20???????else
21??????????SetCookie("username",username,1);
22????
23???????//?通過驗證，跳轉到下一頁面
24????????document.location?=?"page2.html";
25????}
26????else
27????{
28???????alert("用戶名或密碼錯誤！");
29????}
30?}
31
32?function?$(id)
33?{
34????return?document.getElementById(id);
35?}
36
37</script>
調用（或稱 嵌入）以上Js代碼的頁面文件，如下：
?2?<body>
?3??<div?id="main">
?4????<div>
?5???????<span>用戶名：</span>?<input?type="text"?id="user"?/>
?6????</div>
?7????<div>
?8???????<span>密?碼：</sapn>?<input?type="password"?id="pass"?/>
?9????</div>?
10????<div>
11???????<input?type="checkbox"?id="save"?/>?七天內無需登錄
12????</div>
13????<div>
14???????<input?type="button"?onclick="login()"?value="登?錄"?/>
15????</div>
16?</body>
頁面效果 如下所示：
前面講到
“
設置Cookie時，可以直接給 document.cookie 賦值：
?? ?document.cookie="userId=828";
??? document.cookie="userName=hulk";
而且后面的值不會覆蓋前面的值，它具有一種 累加機制。
”
Page2.html內部頁面（你可以先這樣理解），必須在登錄后才能使用。該頁面需要對用戶當前PC的Cookie進行判斷，如果發現用戶已經通過該機器登錄過，該頁面則顯示 歡迎信息，否則顯示“請登錄”的鏈接。
Page2.html頁面的代碼如下（下面分開說明）：
（1） Js代碼 （通用讀取Cookie方法）：
?
?/**//***?
?*?讀取指定的Cookie值
?*?@param?{string}?cookieName?Cookie名稱
?*/
?//?方法一：
?function?GetCookie(cookieName)
?{
????/**//*?Cookie?字符串?*/
????var?theCookie?=?""?+?document.cookie;
????/**//*?找到cookieName的位置?*/
????var?ind?=?theCookie.indexOf(cookieName);
????/**//*?如果未找到cookieName，返回空字符串?*/
????if(ind?==?-1?||?cookieName?==?"")
???????return?"";
????
?????/**//*?確定分號的位置?*/
?????var?ind1?=?theCookie.indexOf(';',?ind);
?????if(ind1?==?-1)?
??????????ind1?=?theCookie.length;
?????
?????/**//*?讀取Cookie值?*/
?????return?unescape(theCookie.substring(ind+cookieName.length?+?1,?ind1));
?}
?//?方法二：
?function?GetCookie(cookieName)
?{
????var?strCookie=document.cookie;
????//?將多cookie切割為多個名/值對
????var?arrCookie=strCookie.split(";?");?
????for(var?i=0;i<arrCookie.length;i++)
???{?
??????//?遍歷cookie數組，處理每個cookie對
???????var?arr=arrCookie[i].split("=");
?????
??????//?找到名稱為cookieName的cookie，并返回它的值
???????if(arr[0]=="username")
??????return?arr[1];
???}
?????return?"";
}
(2) Page2.html HTML 代碼部分：
????
??function?init()
??{
?????//?從Cookie中讀取用戶名信息
??????var?username?=?GetCookie("username");
???
?????//?如果用戶已經登錄過
??????if(username?&&?username.length?>0)
?????{
????????//?顯示歡迎信息
?????????$("msg").innerHTML?=?"<h2>歡迎光臨："+?username?+?"!</h2>";
?????}
?????else
?????{
????????$("msg").innerHTML?=?"<a?href='Page1.html'>請返回，登錄！</a>";
?????}
??}
???function?$(id)
???{
??????return?document.getElementById(id);
???}
???//?HTML?body部分
???<body?onload="init()">
??????<div?id="msg"></div>
???</body>
另外，關于刪除Cookie,可以使用以下方法：
該函數可以刪除指定名稱的cookie：
???function?deleteCookie(username){
???var?date=new?Date();
???//?//?刪除一個cookie，就是將其過期時間設定為一個過去的時間
???date.setTime(date.getTime()-10000);?
???document.cookie=name+"=v;?expire="?+?date.toGMTString();
}
</script>?
?
轉載于:https://www.cnblogs.com/Dlonghow/archive/2008/07/10/1240109.html
總結
以上是生活随笔為你收集整理的JavaScript： Cookie 详解、实例与应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 情侣求生欲游戏中如何打开空调制冷
- 下一篇： “琴酒驶弦酌”上一句是什么