JavaScript中的document.cookie的使用

阿新 • • 發佈：2019-02-10

我們已經知道，在 document 物件中有一個 cookie 屬性。但是 Cookie 又是什麼？“某些 Web 站點在您的硬碟上用很小的文字檔案儲存了一些資訊，這些檔案就稱為 Cookie。”—— MSIE 幫助。一般來說，Cookies 是 CGI 或類似，比 HTML 高階的檔案、程式等建立的，但是 javascript 也提供了對 Cookies 的很全面的訪問權利。

　　我們先要學一學 Cookie 的基本知識。

　　每個 Cookie 都是這樣的：<cookie名>=<值>

　　<cookie名>的限制與 javascript 的命名限制大同小異，少了“不能用 javascript 關鍵字”，多了“只能用可以用在 URL 編碼中的字元”。後者比較難懂，但是隻要你只用字母和數字命名，就完全沒有問題了。<值>的要求也是“只能用可以用在 URL 編碼中的字元”。

　　每個 Cookie 都有失效日期，一旦電腦的時鐘過了失效日期，這個 Cookie 就會被刪掉。我們不能直接刪掉一個 Cookie，但是可以用設定失效日期早於現在時刻的方法來間接刪掉它。

　　每個網頁，或者說每個站點，都有它自己的 Cookies，這些 Cookies 只能由這個站點下的網頁來訪問，來自其他站點或同一站點下未經授權的區域的網頁，是不能訪問的。每一“組”Cookies 有規定的總大小（大約 2KB 每“組”），一超過最大總大小，則最早失效的 Cookie 先被刪除，來讓新的 Cookie“安家”。

　　現在我們來學習使用 documents.cookie 屬性。

　　如果直接使用 documents.cookie 屬性，或者說，用某種方法，例如給變數賦值，來獲得 documents.cookie 的值，我們就可以知道在現在的文件中有多少個 Cookies，每個 Cookies 的名字，和它的值。例如，在某文件中新增“document.write(documents.cookie)”，結果顯示：

name=kevin; [email protected]; lastvisited=index.html

這意味著，文件包含 3 個 Cookies：name, email 和 lastvisited，它們的值分別是 kevin, [email protected] 和 index.html。可以看到，兩個 Cookies 之間是用分號和空格隔開的，於是我們可以用 cookieString.split('; ') 方法得到每個 Cookie 分開的一個數組（先用 var cookieString = documents.cookie）。

　　設定一個 Cookie 的方法是對 documents.cookie 賦值。與其它情況下的賦值不同，向 documents.cookie 賦值不會刪除掉原有的 Cookies，而只會增添 Cookies 或更改原有 Cookie。賦值的格式：

documents.cookie = 'cookieName=' + escape('cookievalue')
+ ';expires=' + expirationDateObj.toGMTString();

是不是看到頭暈了呢？cookieName 表示 Cookie 的名稱，cookievalue 表示 Cookie 的值，expirationDateObj 表示儲存著失效日期的日期物件名，如果不需要指定失效日期，則不需要第二行。不指定失效日期，則瀏覽器預設是在關閉瀏覽器（也就是關閉所有視窗）之後過期。

　　首先 escape() 方法：為什麼一定要用？因為 Cookie 的值的要求是“只能用可以用在 URL 編碼中的字元”。我們知道“escape()”方法是把字串按 URL 編碼方法來編碼的，那我們只需要用一個“escape()”方法來處理輸出到 Cookie 的值，用“unescape()”來處理從 Cookie 接收過來的值就萬無一失了。而且這兩個方法的最常用途就是處理 Cookies。其實設定一個 Cookie 只是“documents.cookie = 'cookieName=cookievalue'”這麼簡單，但是為了避免在 cookievalue 中出現 URL 裡不準出現的字元，還是用一個 escape() 好。
　　然後“expires”前面的分號：注意到就行了。是分號而不是其他。
　　最後 toGMTString() 方法：設定 Cookie 的時效日期都是用 GMT 格式的時間的，其它格式的時間是沒有作用的。

　　現在我們來實戰一下。設定一個“name=rose”的 Cookie，在 3 個月後過期。

var expires = new Date();
expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 三個月 x 一個月當作 30 天 x 一天 24 小時
x 一小時 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */
documents.cookie = 'name=rose;expires=' + expires.toGMTString();

為什麼沒有用 escape() 方法？這是因為我們知道 rose 是一個合法的 URL 編碼字串，也就是說，'rose' == escape('rose')。一般來說，如果設定 Cookie 時不用 escape()，那獲取 Cookie 時也不用 unescape()。

　　再來一次：編寫一個函式，作用是查詢指定 Cookie 的值。

function getCookie(cookieName) {
var cookieString = documents.cookie;
var start = cookieString.indexOf(cookieName + '=');
// 加上等號的原因是避免在某些 Cookie 的值裡有
// 與 cookieName 一樣的字串。
if (start == -1) // 找不到
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if (end == -1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}

這個函式用到了字串物件的一些方法，如果你不記得了（你是不是這般沒記性啊），請快去查查。這個函式所有的 if 語句都沒有帶上 else，這是因為如果條件成立，程式執行的都是 return 語句，在函式裡碰上 return，就會終止執行，所以不加 else 也沒問題。該函式在找到 Cookie 時，就會返回 Cookie 的值，否則返回“null”。

　　現在我們要刪除剛才設定的 name=rose Cookie。

var expires = new Date();
expires.setTime(expires.getTime() - 1);
documents.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到，只需要把失效日期改成比現在日期早一點（這裡是早 1 毫秒），再用同樣的方法設定 Cookie，就可以刪掉 Cookie 了。

附一個老外寫的js操作cookie的函式：

[javascript] view plain copy

///設定cookie
function setCookie(NameOfCookie, value, expiredays)
{
//@引數:三個變數用來設定新的cookie:
//cookie的名稱,儲存的Cookie值,
// 以及Cookie過期的時間.
// 這幾行是把天數轉換為合法的日期
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
// 下面這行是用來儲存cookie的,只需簡單的為"document.cookie"賦值即可.
// 注意日期通過toGMTstring()函式被轉換成了GMT時間。
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
///獲取cookie值
function getCookie(NameOfCookie)
{
// 首先我們檢查下cookie是否存在.
// 如果不存在則document.cookie的長度為0
if (document.cookie.length > 0)
{
// 接著我們檢查下cookie的名字是否存在於document.cookie
// 因為不止一個cookie值儲存,所以即使document.cookie的長度不為0也不能保證我們想要的名字的cookie存在
//所以我們需要這一步看看是否有我們想要的cookie
//如果begin的變數值得到的是-1那麼說明不存在
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{
// 說明存在我們的cookie.
begin += NameOfCookie.length+1;//cookie值的初始位置
end = document.cookie.indexOf(";", begin);//結束位置
if (end == -1) end = document.cookie.length;//沒有;則end為字串結束位置
return unescape(document.cookie.substring(begin, end)); }
}
returnnull;
// cookie不存在返回null
}
///刪除cookie
function delCookie (NameOfCookie)
{
// 該函式檢查下cookie是否設定，如果設定了則將過期時間調到過去的時間;
//剩下就交給作業系統適當時間清理cookie啦
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

演示檔案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Cookie</title>
<mce:styletype="text/css"><!--
#welcome h3
{
font-weight:normal;
color:#800;
}
--></mce:style><styletype="text/css"mce_bogus="1">
#welcome h3
{
font-weight:normal;
color:#800;
} </style>
<mce:scripttype="text/javascript"src="cookie.js"mce_src="cookie.js"></mce:script>
<mce:scripttype="text/javascript"><!--
//---------------使用cookie----------------------
function useCookie()
{
var username=getCookie("username");
if(username!=null){
document.getElementById('welcome').innerHTML="<h3>歡迎您,"+username+"</h3>"+"<buttononclick='delusr();'>刪除使用者名稱</button>";
}else{
var str="<h3>歡迎您,遊客!</h3>"+
"<inputid='usrname'type='text'/>"+
"<buttonid='saveusr'onclick='checksave();'>儲存使用者名稱</button>";
document.getElementById('welcome').innerHTML=str;
}
}
function checksave()
{
var el=document.getElementById('usrname');
if(el.value){
setCookie("username",el.value);
location.reload();//重新整理頁面
}
else
alert("輸入框不能為空");
}
function delusr()
{
delCookie("username");
location.reload();
}
// --></mce:script>
</head>
<bodyonload="useCookie();">
<divid="welcome">
</div>
</body>
</html>

JavaScript中的document.cookie的使用

Javascript中document.execCommand()的用法

Javascript中document.execCommand()的用法 ( 實現瀏覽器菜單的很多功能 )

JS中document.cookie詳解

【JavaScript】Javascript中document.execCommand()的用法

javascript中document物件的知識點

如何在JavaScript中設定cookie

JavaScript中的document.cookie的使用

Javascript中只能在 HTML 輸出流中使用 document.write,在文件已載入後使用它（比如在函式中），會覆蓋整個文件。

HTML中巢狀的JavaScript語言 document.getElementById（“”）函式的使用

【小白】javascript中的“文件已完成載入後執行 document.write，整個 HTML 頁面將被覆蓋”

JavaScript 中的document.open()方法

概念區分：JavaScript中的global物件，window物件以及document物件

JavaScript 中的函數介紹

JavaScript中this的用法

javaScript中奇葩的假值

JavaScript中提供獲取HTML元素位置的屬性：

JavaScript中var變量引用function與直接聲明function

JavaScript中的call、apply、bind是怎麽回事？

asp.net中的cookie

JavaScript中return的用法詳解

JavaScript中的document.cookie的使用

相關推薦