精通js操作cookie|js操作
阿新 • • 發佈：2019-02-04
Cookie的構成
Cookies最初設計時，是為了CGI程式設計。但是，我們也可以使用Javascript指令碼來操縱cookies。在本文裡，我們將演示如何使用Javascript指令碼來操縱cookies。(如果有需求，我可能會在以後的文章裡介紹如何使用Perl進行cookie管理。但是如果實在等不得，那麼我現在就教你一手：仔細看看CGI.pm。在這個CGI包裡有一個cookie()函式，可以用它建立cookie。但是，還是讓我們先來介紹cookies的本質。
在Javascript腳本里，一個cookie 實際就是一個字串屬性。當你讀取cookie的值時，就得到一個字串，裡面當前WEB頁使用的所有cookies的名稱和值。每個cookie除了name名稱和value值這兩個屬性以外，還有四個屬性。這些屬性是： expires過期時間、 path路徑、 domain域、以及 secure安全。
Expires – 過期時間。指定cookie的生命期。具體是值是過期日期。如果想讓cookie的存在期限超過當前瀏覽器會話時間，就必須使用這個屬性。當過了到期日期時，瀏覽器就可以刪除cookie檔案，沒有任何影響。
Path – 路徑。指定與cookie關聯的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設定的cookes，該怎麼辦？這時，我們要把cookies 的path屬性設定成“/”。在指定路徑的時候，凡是來自同一伺服器，URL裡有相同路徑的所有WEB頁面都可以共享cookies。現在看另一個例子：如果想讓 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共享cookies，就要把path設成“/devhead”。
Domain – 域。指定關聯的WEB伺服器或域。值是域名，比如zdnet.com。這是對path路徑屬性的一個延伸。如果我們想讓 catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設定的cookies，該怎麼辦? 我們可以把domain屬性設定成“mycompany.com”，並把path屬性設定成“/”。FYI：不能把cookies域屬性設定成與設定它的伺服器的所在域不同的值。
Secure – 安全。指定cookie的值通過網路如何在使用者和WEB伺服器之間傳遞。這個屬性的值或者是“secure”，或者為空。預設情況下，該屬性為空，也就是使用不安全的HTTP連線傳遞資料。如果一個 cookie 標記為secure，那麼，它與WEB伺服器之間就通過HTTPS或者其它安全協議傳遞資料。不過，設定了secure屬性不代表其他人不能看到你機器本地儲存的cookie。換句話說，把cookie設定為secure，只保證cookie與WEB伺服器之間的資料傳輸過程加密，而儲存在本地的cookie檔案並不加密。如果想讓本地cookie也加密，得自己加密資料。
操縱Cookies
請記住，cookie就是文件的一個字串屬性。要儲存cookie，只要建立一個字串，格式是name=<value>（名稱＝值），然後把文件的 document.cookie 設定成與它相等即可。比如，假設想儲存表單接收到的使用者名稱，那麼程式碼看起來就象這樣：
document.cookie = "username" + escape(form.username.value);
在這裡，使用 escape() 函式非常重要，因為cookie值裡可能包含分號、逗號或者空格。這就是說，在讀取cookie值時，必須使用對應的unescape()函式給值解碼。
我們當然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字串值後面：
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]
<value>, <date>, <domain> 和 <path> 應當用對應的值替換。<date> 應當使用GMT格式，可以使用Javascript指令碼語言的日期類Date的.toGMTString() 方法得到這一GMT格式的日期值。方括號代表這項是可選的。比如在 [; secure]兩邊的方括號代表要想把cookie設定成安全的，就需要把"; secure" 加到cookie字串值的後面。如果"; secure" 沒有加到cookie字串後面，那麼這個cookie就是不安全的。不要把尖括號<> 和方括號[] 加到cookie裡（除非它們是某些值的內容）。設定屬性時，不限屬性，可以用任何順序設定。
下面是一個例子，在這個例子裡，cookie "username" 被設定成在15分鐘之後過期，可以被伺服器上的所有目錄訪問，可以被"mydomain.com"域裡的所有伺服器訪問，安全狀態為安全。
// Date() 的構造器設定以毫秒為單位
// .getTime() 方法返回時間，單位為毫秒
// 所以要設定15分鐘到期，要用60000毫秒乘15分鐘
var expiration = new Date((new Date()).getTime() + 15 * 60000);
document.cookie = "username=" + escape(form.username.value)+ "; expires ="
+ expiration.toGMTString() + "; path=" + "/" + "; _
domain=" + "mydomain.com" + "; secure";
讀取cookies值有點象個小把戲，因為你一次就得到了屬於當前文件的所有cookies。
// 下面這個語句讀取了屬於當前文件的所有cookies
var allcookies = document.cookie;
現在，我們得解析allcookies變數裡的不同cookies，找到感興趣的指定cookie。這個工作很簡單，因為我們可以利用Javascript語言提供的擴充套件字串支援。
如果我們對前面分配的cookie "username" 感興趣，可以用下面的指令碼來讀取它的值。
// 我們定義一個函式，用來讀取特定的cookie值。
function getCookie(cookie_name)
{
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);
// 如果找到了索引，就代表cookie存在，
// 反之，就說明不存在。
if (cookie_pos != -1)
{
// 把cookie_pos放在值的開始，只要給值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);
if (cookie_end == -1)
{
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end));
}
return value;
}
// 呼叫函式
var cookie_val = getCookie("username");
上面例程裡的 cookie_val 變數可以用來生成動態內容，或者傳送給伺服器端CGI指令碼進行處理。現在你知道了使用Javascript指令碼操縱cookies的基本方法。但是，如果你跟我一樣，那麼我們要做的第一件事，就是建立一些介面函式，把cookies處理上的麻煩隱藏起來。不過，在你開始程式設計之前，稍候片刻。這些工作，早就有人替你做好了。你要做的，只是到哪去找這些介面函式而已。
比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.這本書裡，可以找到很好的cookie應用類。你也可以在Oreilly的WEB站點上找到這本書裡的例子。本文最後的連結列表裡，有一些訪問這些cookie示例的直接連結。
Cookies 怪獸
因為某些原因Cookies 的名聲很不好。許多人利用cookies做一些卑鄙的事情，比如流量分析、點選跟蹤。Cookies 也不是非常安全，特別是沒有secure屬性的cookies。不過，即使你用了安全的cookies，如果你和別人共用計算機，比如在網咖，那麼別人就可以窺探計算機硬碟上未加密儲存的cookie檔案，也就有可能竊取你的敏感資訊。所以，如果你是一個WEB開發人員，那麼你要認真考慮這些問題。不要濫用cookies。不要把使用者可能認為是敏感的資料儲存在cookies裡。如果把使用者的社會保險號、信用卡號等儲存在cookie裡，等於把這些敏感資訊放在窗戶紙下，無異於把使用者投到極大危險之中。一個好的原則是，如果你不想陌生人瞭解你的這些資訊，那就不要把它們儲存在cookies裡。
另外，cookies還有一些實際的限制。Cookies保留在計算機上，不跟著使用者走。如果使用者想換計算機，那麼新計算機無法得到原來的cookie。甚至使用者在同一臺計算機上使用不同瀏覽器，也得不到原來的cookie：Netscape 不能讀取Internet Explorer 的cookies。
還有，使用者也不願意接受cookies。所以不要以為所有的瀏覽器都能接受你發出的cookies。如果瀏覽器不接受cookies，你要保證自己的WEB站點不致因此而崩潰或中斷。
另外WEB 瀏覽器能保留的cookies不一定能超過300個。也沒有標準規定瀏覽器什麼時候、怎麼樣作廢cookies。所以達到限制時，瀏覽器能夠有效地隨機刪除cookies。瀏覽器保留的來自一個WEB伺服器上的cookies，不超過20個，每個cookie的資料（包括名稱和值），不超過4K位元組。(不過，本文裡的cookie尺寸沒問題，它只佔了12 K位元組，儲存在3個3 cookies裡。)
簡而言之，注意保持cookie簡單。不要依賴cookies的存在，不要在每個cookie裡儲存太多資訊。不要儲存太多的cookes。但是，拋除這些限制，在技巧高超的WEB管理員手裡，cookie的概念是一個有用的工具
Cookies最初設計時，是為了CGI程式設計。但是，我們也可以使用Javascript指令碼來操縱cookies。在本文裡，我們將演示如何使用Javascript指令碼來操縱cookies。(如果有需求，我可能會在以後的文章裡介紹如何使用Perl進行cookie管理。但是如果實在等不得，那麼我現在就教你一手：仔細看看CGI.pm。在這個CGI包裡有一個cookie()函式，可以用它建立cookie。但是，還是讓我們先來介紹cookies的本質。
在Javascript腳本里，一個cookie 實際就是一個字串屬性。當你讀取cookie的值時，就得到一個字串，裡面當前WEB頁使用的所有cookies的名稱和值。每個cookie除了name名稱和value值這兩個屬性以外，還有四個屬性。這些屬性是： expires過期時間、 path路徑、 domain域、以及 secure安全。
Expires – 過期時間。指定cookie的生命期。具體是值是過期日期。如果想讓cookie的存在期限超過當前瀏覽器會話時間，就必須使用這個屬性。當過了到期日期時，瀏覽器就可以刪除cookie檔案，沒有任何影響。
Path – 路徑。指定與cookie關聯的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設定的cookes，該怎麼辦？這時，我們要把cookies 的path屬性設定成“/”。在指定路徑的時候，凡是來自同一伺服器，URL裡有相同路徑的所有WEB頁面都可以共享cookies。現在看另一個例子：如果想讓 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共享cookies，就要把path設成“/devhead”。
Domain – 域。指定關聯的WEB伺服器或域。值是域名，比如zdnet.com。這是對path路徑屬性的一個延伸。如果我們想讓 catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設定的cookies，該怎麼辦? 我們可以把domain屬性設定成“mycompany.com”，並把path屬性設定成“/”。FYI：不能把cookies域屬性設定成與設定它的伺服器的所在域不同的值。
Secure – 安全。指定cookie的值通過網路如何在使用者和WEB伺服器之間傳遞。這個屬性的值或者是“secure”，或者為空。預設情況下，該屬性為空，也就是使用不安全的HTTP連線傳遞資料。如果一個 cookie 標記為secure，那麼，它與WEB伺服器之間就通過HTTPS或者其它安全協議傳遞資料。不過，設定了secure屬性不代表其他人不能看到你機器本地儲存的cookie。換句話說，把cookie設定為secure，只保證cookie與WEB伺服器之間的資料傳輸過程加密，而儲存在本地的cookie檔案並不加密。如果想讓本地cookie也加密，得自己加密資料。
操縱Cookies
請記住，cookie就是文件的一個字串屬性。要儲存cookie，只要建立一個字串，格式是name=<value>（名稱＝值），然後把文件的 document.cookie 設定成與它相等即可。比如，假設想儲存表單接收到的使用者名稱，那麼程式碼看起來就象這樣：
document.cookie = "username" + escape(form.username.value);
在這裡，使用 escape() 函式非常重要，因為cookie值裡可能包含分號、逗號或者空格。這就是說，在讀取cookie值時，必須使用對應的unescape()函式給值解碼。
我們當然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字串值後面：
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]
<value>, <date>, <domain> 和 <path> 應當用對應的值替換。<date> 應當使用GMT格式，可以使用Javascript指令碼語言的日期類Date的.toGMTString() 方法得到這一GMT格式的日期值。方括號代表這項是可選的。比如在 [; secure]兩邊的方括號代表要想把cookie設定成安全的，就需要把"; secure" 加到cookie字串值的後面。如果"; secure" 沒有加到cookie字串後面，那麼這個cookie就是不安全的。不要把尖括號<> 和方括號[] 加到cookie裡（除非它們是某些值的內容）。設定屬性時，不限屬性，可以用任何順序設定。
下面是一個例子，在這個例子裡，cookie "username" 被設定成在15分鐘之後過期，可以被伺服器上的所有目錄訪問，可以被"mydomain.com"域裡的所有伺服器訪問，安全狀態為安全。
// Date() 的構造器設定以毫秒為單位
// .getTime() 方法返回時間，單位為毫秒
// 所以要設定15分鐘到期，要用60000毫秒乘15分鐘
var expiration = new Date((new Date()).getTime() + 15 * 60000);
document.cookie = "username=" + escape(form.username.value)+ "; expires ="
+ expiration.toGMTString() + "; path=" + "/" + "; _
domain=" + "mydomain.com" + "; secure";
讀取cookies值有點象個小把戲，因為你一次就得到了屬於當前文件的所有cookies。
// 下面這個語句讀取了屬於當前文件的所有cookies
var allcookies = document.cookie;
現在，我們得解析allcookies變數裡的不同cookies，找到感興趣的指定cookie。這個工作很簡單，因為我們可以利用Javascript語言提供的擴充套件字串支援。
如果我們對前面分配的cookie "username" 感興趣，可以用下面的指令碼來讀取它的值。
// 我們定義一個函式，用來讀取特定的cookie值。
function getCookie(cookie_name)
{
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);
// 如果找到了索引，就代表cookie存在，
// 反之，就說明不存在。
if (cookie_pos != -1)
{
// 把cookie_pos放在值的開始，只要給值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);
if (cookie_end == -1)
{
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end));
}
return value;
}
// 呼叫函式
var cookie_val = getCookie("username");
上面例程裡的 cookie_val 變數可以用來生成動態內容，或者傳送給伺服器端CGI指令碼進行處理。現在你知道了使用Javascript指令碼操縱cookies的基本方法。但是，如果你跟我一樣，那麼我們要做的第一件事，就是建立一些介面函式，把cookies處理上的麻煩隱藏起來。不過，在你開始程式設計之前，稍候片刻。這些工作，早就有人替你做好了。你要做的，只是到哪去找這些介面函式而已。
比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.這本書裡，可以找到很好的cookie應用類。你也可以在Oreilly的WEB站點上找到這本書裡的例子。本文最後的連結列表裡，有一些訪問這些cookie示例的直接連結。
Cookies 怪獸
因為某些原因Cookies 的名聲很不好。許多人利用cookies做一些卑鄙的事情，比如流量分析、點選跟蹤。Cookies 也不是非常安全，特別是沒有secure屬性的cookies。不過，即使你用了安全的cookies，如果你和別人共用計算機，比如在網咖，那麼別人就可以窺探計算機硬碟上未加密儲存的cookie檔案，也就有可能竊取你的敏感資訊。所以，如果你是一個WEB開發人員，那麼你要認真考慮這些問題。不要濫用cookies。不要把使用者可能認為是敏感的資料儲存在cookies裡。如果把使用者的社會保險號、信用卡號等儲存在cookie裡，等於把這些敏感資訊放在窗戶紙下，無異於把使用者投到極大危險之中。一個好的原則是，如果你不想陌生人瞭解你的這些資訊，那就不要把它們儲存在cookies裡。
另外，cookies還有一些實際的限制。Cookies保留在計算機上，不跟著使用者走。如果使用者想換計算機，那麼新計算機無法得到原來的cookie。甚至使用者在同一臺計算機上使用不同瀏覽器，也得不到原來的cookie：Netscape 不能讀取Internet Explorer 的cookies。
還有，使用者也不願意接受cookies。所以不要以為所有的瀏覽器都能接受你發出的cookies。如果瀏覽器不接受cookies，你要保證自己的WEB站點不致因此而崩潰或中斷。
另外WEB 瀏覽器能保留的cookies不一定能超過300個。也沒有標準規定瀏覽器什麼時候、怎麼樣作廢cookies。所以達到限制時，瀏覽器能夠有效地隨機刪除cookies。瀏覽器保留的來自一個WEB伺服器上的cookies，不超過20個，每個cookie的資料（包括名稱和值），不超過4K位元組。(不過，本文裡的cookie尺寸沒問題，它只佔了12 K位元組，儲存在3個3 cookies裡。)
簡而言之，注意保持cookie簡單。不要依賴cookies的存在，不要在每個cookie裡儲存太多資訊。不要儲存太多的cookes。但是，拋除這些限制，在技巧高超的WEB管理員手裡，cookie的概念是一個有用的工具