首頁 > 開發者 > JavaScript
在 JS(JavaScript) 操作cookies比較複雜，在 ASP 裡面我們只需要知道 cookie 的名稱、cookie 的值就行了，而 JS 裡面，我們面對的是 cookie 的字串，你自己編寫這個字串寫入用戶端，然後自己解析這個字串。
一、從寫 cookie 說起。
var the_date = new Date("December 31, 2020");
var expiresDate = the_date.toGMTString();
document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;
第一句是日期對象；
第二句將日期格式轉換成 GMT 格式；編者者： GMT 即格林威治標準時間，現在也稱 UTC 即全球標準時間。
第三句是將 cookie 內容寫入用戶端。
其中 expires 是系統使用的，表示 cookie 的失效日期（也可以省略），expires 不可讀。
escape 是對 cookie 值進行編碼，這是為了處理中文、空格等而設立的。
二、取 cookie 是比較簡單的。
function GetCSS()
{
var cookieStr = document.cookie; //取 cookie 字串，由於 expires 不可讀，所以 expires 將不會出現在 cookieStr 中。
if (cookieStr == "")
{
return "main1"; //沒有取到 cookie 字串，返回預設值
}
var cookieValue = cookieStr.split("; "); //將各個 cookie 分隔開，並存為數組，多個 cookie 之間用分號加空隔隔開，不過前面我們只使用了一個 cookie，它的值與 expires 之間也是用分號加空格隔開的
var varName = "userDefineCSS";
var startPos = -1;
var endPos = -1;
for (var i=0; i<cookieValue.length; i++)
{
startPos = cookieValue[i].indexOf(varName);
if (startPos != 0)
{
continue; //當前 cookie 不是名稱為 varName 的 cookie，判斷下一個 cookie
}
startPos += varName.length + 1; //當前 cookie 就是名稱為 varName 的 cookie，由於有等號，所以 +1
endPos = cookieValue[i].length;
var css = unescape(cookieValue[i].substring(startPos, endPos));
return css;
}
return "main1";
}
由於寫 cookie 時使用了 escape，所以返回 cookie 值時使用 unescape 進行解碼。
首先看看cookies的結構
我們這裡所說的 cookie 結構並非其儲存結構，而是其表現結構，主要通過研究其表現結構來實現 JS(JavaScript) 對 cookie 的操作。
cookie 的表現結構較為簡單，每個 cookie 由 cookie 名稱 和 cookie 值組成，用等號表示二者關係，各個 cookie 之間用分號加空格隔開。正如前面所說 expires、path、domain 均不可讀，所以在表現結構中也沒有體現出來。
cookieName1=cookieValue1; cookieName2=cookieValue2[...; cookieNamen=cookieValuen]
通過分隔分號加空格符號，就可以獲得各個 cookie，再通過分隔等號，就可以得出各個 cookie 的名稱和值。
cookie 的子鍵，只是表現在 cookieValue 上，一個子鍵的結構是：子鍵名稱=子索引值，多個子鍵之間用 & 串連起來。比如：
cookieName1=子鍵名稱1=子索引值1&子鍵名稱2=子索引值2
如果是 ASP 檔案，我們會發現 cookie 結構中有這樣一段字串：ASPSESSIONIDQSTDRATQ=24位字元
關於此，查看：http://www.aspxuexi.com/aspbasic/cookie/2006-6-10/Session_Cookie.htm
同名的 cookie，不同的 domain 或不同的 path，屬不同的 cookie；
同名的 cookie，相同的 domain 且相同的 path，不同的 expires，屬同一個 cookie。
cookie 有路徑－－path，表示哪些路徑下的檔案有許可權讀取該 cookie。
path 應該以 "/" 結尾，同名 cookie，不同 path，屬不同的 cookie
document.cookie = "N1=1; path=/path/";
document.cookie = "N1=2; path=/path";
document.cookie = "N1=3; path=path/";
如上代碼，前兩句使用的是絕對路徑，即相對於網站根目錄的網頁目錄，第三句使用的是相對路徑，相對於目前的目錄的。
第一句和第二句在於結尾不同，雖然他們所表達的許可權相同，但是由於 path 字串不同，會形成兩個同名的 cookie，容易造成混亂，我們建議不要使用第二句這種格式，因為系統預設也是以 "/" 結尾的。
所以如上述是三個 cookie，之間不會相互覆蓋。
path 屬性值有大小寫之分，應與瀏覽器中的地址欄的輸入一致
document.cookie = "N1=1; path=/path/";
document.cookie = "N1=2; path=/paTH/";
這是兩個不同的 cookie，因為 path 屬性值大小寫不同，如果我們在地址欄輸入的是 path，那麼就讀取第一個 N1，如果我們輸入的是 paTH，那麼就讀取第二個 N1
path 不可讀
同 expires 一樣，path 只可寫，不可讀。
path 不可更改
同 expires 不一樣，如果我們試圖更改 path，那麼實際上我們是另外寫了一個 cookie，而不是更改了 path 值。
path 許可權有繼承性
假如指定了 /test/ 目錄有許可權讀取某 cookie，那麼 /test/ 之下的目錄 /test/t/ 也有許可權讀取該 cookie。
cookie 有失效日期－－expires，如果還沒有過失效期，即使重新啟動電腦，cookie 仍然不會丟失，如果沒有指定 expires 值，那麼在關閉瀏覽器時，cookie 即失效。
在 JS(JavaScript) 中使用 expires 時應該和 cookie 同時寫入，如：
document.cookie = "clr=red; expires=" + expiresDate;
而如下寫法是不正確的：
document.cookie = "clr=red";
document.cookie = "expires=" + expiresDate;
這樣寫會形成兩個 cookie，第二個 cookie 的名稱是 expires，兩個 cookie 均沒有指定失效日期。
expires 不可讀
這就是為什麼，我們在 ASP 中使用 response.Write request.cookies("cname").expires 會出錯，同樣在 JS(JavaScript) 中使用 document.cookie 也不會顯示出 expires。
expires 值應該使用 GMT 格式的時間
var the_date = new Date("December 31, 2020");
var expiresDate = the_date.toGMTString(); //轉換成 GMT 格式。編者者： GMT 即格林威治標準時間，現在也稱 UTC 即全球標準時間。
提供一個javascript操作cookies的函數
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS 對 Cookie 的操作函數</title>
</head>
<body>
<script type="text/javascript" language="javascript">
<!--
//寫入 cookie
//不區分 cookieName 的大小寫
//不考慮子鍵
function ResponseCookies(cookieName, cookieValue, expires)
{
if (expires)
{
//指定了 expires
document.cookie = ResponseCookies_GetCookieName(cookieName) + "=" + escape(cookieValue) + "; expires=" + expires.toGMTString();
}
else
{
document.cookie = ResponseCookies_GetCookieName(cookieName) + "=" + escape(cookieValue);
}
}
//擷取並返回與 cookieName 同名的 cookie 名稱，允許大小寫不同
//如果不存在這樣的 cookie，就返回 cookieName
function ResponseCookies_GetCookieName(cookieName)
{
var lowerCookieName = cookieName.toLowerCase();
var cookieStr = document.cookie;
if (cookieStr == "")
{
return cookieName;
}
var cookieArr = cookieStr.split("; ");
var pos = -1;
for (var i=0; i<cookieArr.length; i++)
{
pos = cookieArr[i].indexOf("=");
if (pos > 0)
{
if (cookieArr[i].substring(0, pos).toLowerCase() == lowerCookieName)
{
return cookieArr[i].substring(0, pos);
}
}
}
return cookieName;
}
//擷取並返回 cookie 值
//不區分 cookieName 的大小寫
//dfltValue 為預設傳回值
//不考慮子鍵
function RequestCookies(cookieName, dfltValue)
{
var lowerCookieName = cookieName.toLowerCase();
var cookieStr = document.cookie;
if (cookieStr == "")
{
return dfltValue;
}
var cookieArr = cookieStr.split("; ");
var pos = -1;
for (var i=0; i<cookieArr.length; i++)
{
pos = cookieArr[i].indexOf("=");
if (pos > 0)
{
if (cookieArr[i].substring(0, pos).toLowerCase() == lowerCookieName)
{
return unescape(cookieArr[i].substring(pos+1, cookieArr[i].length));
}
}
}
return dfltValue;
}
document.write("寫入名稱為 cv 的 cookie...<br>");
ResponseCookies("cv", "cv20", null);
document.write("寫入名稱為 Ab，帶失效日期的 cookie...<br>");
var expires = new Date("December 31, 2045");
ResponseCookies("Ab", "Ab20", expires);
document.write("讀取名稱為 ab 的 cookie..." + RequestCookies("ab", ""));
-->
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
