JavaScript進階教程(第二課續(xù))
更新時間:2007年04月06日 00:00:00 作者:
如果你想讓你的cookie包含更多的信息,你可以將cookie的值設(shè)得很長.假設(shè)我們要保存某人的姓名,年齡和電話號碼:
var the_cookie = "username:thau/age:older than the hills/phone:411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
我用斜杠/來分割屬性名稱,用分號區(qū)別不同的屬性名稱及其屬性值.斜杠/和分號是不是絕對的選擇,你可以使用任何的字符做分割的標志,比如:
var the_cookie = "username=thau&age=older than the hills&phone=411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
你可以自行選擇限位器.只要你注意在對cookie解碼時也使用同樣的限位器即可.
設(shè)置復雜的cookie時方法要復雜一些.我們建議你使用相關(guān)數(shù)組來保存所有的信息,假設(shè)我們將該cookie保存到某人的硬盤上:
my_happy_cookie=username:thau/age:older than the hills/phone:411
你可以將這些信息放到一個方便的相關(guān)數(shù)組中:
function readTheCookie(the_info)
{
// load the cookie into a variable and unescape it
var the_cookie = document.cookie;
the_cookie = unescape(the_cookie);
// separate the values from the cookie name
var broken_cookie = the_cookie.split("=");
var the_values = broken_cookie[1];
// break each name:value pair into an array
var separated_values = the_values.split("/");
// loop through the list of name:values and load
// up the associate array
var property_value = "";
for (loop=0; loop<separated_values.length; loop++) {
property_value = separated_values[loop];
var broken_info = property_value.split(":");
var the_property = broken_info[0];
var the_value = broken_info[1];
the_info[the_property] = the_value;
}
}
如果在你的JavaScript中有上面這段代碼,你可以這樣調(diào)用它:
var cookie_information = new Array();
readTheCookie(cookie_information);
然后你就會正確設(shè)置了cookie_information["username"],cookie_information["age"], 和cookie_information["phone"].
這些看起來可能有些難以理解,但實際上并不是很難.我們一步步分析:
var the_cookie = document.cookie;
將cookie賦值給一個變量.
var the_cookie = unescape(the_cookie);
取消escape()的編碼
var broken_cookie = the_cookie.split("=");
var the_values = broken_cookie[1];
使the_values等同于username:thau/age:older than the hills/phone:411.
var separated_values = the_values.split("/");
生成一個包含3個元素名為separated_values的數(shù)組:
separated_values[0] = "username:thau"
separated_values[1] = "age:older than the hills"
separated_values[2] = "phone:411"
for (loop=0; loop<separated_values.length; loop++) {
property_value = separated_values[loop];
var broken_info = property_value.split(":");
var the_property = broken_info[0];
var the_value = broken_info[1];
the_info[the_property] = the_value;
}
循環(huán)調(diào)用separated_values的3個元素.
property_value = separated_values[loop];
提取當前的name:value配對,第1個配對是username:thau.
var broken_info = property_value.split(":");
將該配對分成名為broken_info的數(shù)組中的兩個元素:
broken_info[0] = "username"
broken_info[1] = "thau"
var the_property = broken_info[0];
第1次經(jīng)過這個循環(huán)是,the_property是"username"
var the_value = broken_info[1];
其值是"thau"
the_info[the_property] = the_value;
這里開始發(fā)回相關(guān)數(shù)組的便捷功能.它使得the_info["username"] = "thau",所以現(xiàn)在當你需要從cookie中查找username時你只需:
var the_name = the_info["username"];
每次經(jīng)過這個循環(huán)時,就在the_info中加入一個新元素.循環(huán)到最后時,
the_info["username"] = "thau",
the_info["age"] = "old as the hills" ,
而 the_info["phone"] = 411.
有些煩瑣,但是當你需要從cookie中輸出入大量信息時這是一個很好的辦法.當然還有別的辦法.那就是使用多重cookies.
保存多重cookies的方法很直觀.每一個cookie都有一個名稱.上一個例子中的cookie的名稱是my_happy_cookie,我們可以這樣:
var the_cookie ="my_happy_cookie=happiness_and_joy";
document.cookie =the_cookie;
要保存多重cookie,只需給每個cookie一個不同的名字.如果你要加入一個新的cookie,設(shè)置document.cookie時并不會刪除前面已經(jīng)設(shè)置了的cookies,所以:
var the_cookie ="my_happy_cookie=happiness_and_joy";
document.cookie = the_cookie;
var another_cookie= "my_other_cookie=more_joy_more_happiness";
document.cookie = another_cookie;
現(xiàn)在你需要訪問這兩個cookies,有些復雜,所以你需要明了整個過程.假設(shè)你執(zhí)行了上面的代碼,現(xiàn)在想訪問my_happy_cookie.如果你查看document.cookie的內(nèi)容,你會看到:
my_happy_cookie=happiness_and_joy;
my_other_cookie=more_joy_more_happiness;
這樣很直觀,但是如果你想訪問某個特定的cookie則有些困難.下面的代碼可以幫助你找出某個特定的cookie:
function WM_readCookie(name)
{
//如果沒有cookie則返回false或者取得值并返回該值
if(document.cookie == '')
return false;
else
return unescape(WM_getCookieValue(name));
}
function WM_getCookieValue(name)
{
// Declare variables.
var firstChar,lastChar;
// Get the entire cookie string.
// (This may have other name=value pairs in it.)
var theBigCookie = document.cookie;
// Grab just this cookie from theBigCookie string.
// Find the start of 'name'.
firstChar = theBigCookie.indexOf(name);
// If you found it,
if(firstChar != -1)
{
// skip 'name' and '='.
firstChar += name.length + 1;
// Find the end of the value string (i.e. the next';').
lastChar = theBigCookie.indexOf(';', firstChar);
if(lastChar == -1) lastChar = theBigCookie.length;
// Return the value.
return theBigCookie.substring(firstChar, lastChar);
}
else
{
// If there was no cookie, return false.
return false;
}
}
下面我們將學習一下cookies可以做的真正酷的內(nèi)容。
現(xiàn)在你已經(jīng)學會了如何設(shè)置和讀取基本的cookie.然而基本的cookie常常在用戶關(guān)閉他的瀏覽器時會被自動刪除.有時候這樣最好因為通常的域只允許在用戶的機器上保留20個cookie.但是如果你希望將cookie保存在用戶的機器上你需要設(shè)置一個cookie失效的時間,它的格式是一種叫做GMT的特殊格式.例如:
Mon, 27-Apr-1998 00:00:00 GMT
要正確設(shè)置GMT不是一件容易的事,你需要計算好某個日期是星期幾.好在Javascript有一個日期的方法叫做toGMTString可以幫助你.下面是設(shè)定遠期的某個時間的一個例子:
var the_date = new Date("December 31, 2023");
var the_cookie_date =the_date.toGMTString();
一旦你設(shè)置了你的cookie的失效期,你在必須在cookie設(shè)置的前面加入這條信息.因此你的cookie應(yīng)該如下:
cookie_name=blah_blah;expires=date
通常你只需在cookie字符串中加入expires=date,然后用分號分割不同的cookie.
下面是一個如何建立有效期直至Mayan日歷末尾的函數(shù):
function setCookie()
{
// get the information
var the_name = prompt("What's your name?","");
var the_date = new Date("December 31, 2023");
var the_cookie_date =the_date.toGMTString();
// build and save the cookie
var the_cookie = "my_cookie=" + escape(the_name);
the_cookie = the_cookie +";expires=" + the_cookie_date;
document.cookie = the_cookie;
}
最后cookie應(yīng)該如下所示:
my_cookie=thau;expires=Fri,31-Dec-2023 00:00:00 GMT
設(shè)置好cookie之后,它將在用戶的機器中存在直到失效期.如果你將某個cookie的失效期設(shè)置得比當前時間還早,該cookie實際上不能在用戶的機器上存活.
此外,還有兩個注意的事項:路徑(path)和域(domain)。
這是掌握cookie最后的一個障礙:缺省情況下cookie只能被在同一個Web服務(wù)器上同一個路徑下設(shè)置了該cookie的網(wǎng)頁讀取.例如,如果在"http://chimp.webmonkey.com/food/bananas/banana_puree.htm"有一段Javascript詢問了用戶的姓名,你可能需要在你的另一個網(wǎng)頁例如主頁中訪問一個給定的名字.所以你必須設(shè)定該cookie的路徑.路徑"path"用于設(shè)置可以讀取一個cookie的最頂層的目錄.將cookie的路徑設(shè)置為你的網(wǎng)頁最頂層的目錄可以讓該該目錄下的所有網(wǎng)頁都能訪問該cookie.
方法:在你的cookie中加入path=/; 如果你只想讓"food" 目錄中的網(wǎng)頁可以使用該cookie,則你加入path=/food;.還有一點:有些網(wǎng)站有許多小的域名,例如網(wǎng)猴可能還在"chimp.webmonkey.com," "gorilla.webmonkey.com," 和"ape.webmonkey.com." 域名下有網(wǎng)頁.缺省情況下只有"chimp.webmonkey.com" 域下的網(wǎng)頁可以讀取該cookie.如果你向讓"webmonkey.com"下的所有機器都可以讀取該cookie,我們必須在cookie中加入 "domain=webmonkey.com" .
要將一個cookie設(shè)置在"http://chimp.webmonkey.com/food/bananas/banana_puree.htm"并且讓所有網(wǎng)猴的網(wǎng)頁都可以利用它,我們可以這樣:
function setCookie()
{
var the_name = prompt("What's your name?","");
var the_cookie = "cookie_puss=" + escape(the_name) + ";" ;
var the_cookie = the_cookie + "path=/;";
var the_cookie = the_cookie + "domain=webmonkey.com;";
document.cookie = the_cookie;
}
現(xiàn)在我們已經(jīng)學習完了cookie的內(nèi)容.希望你能夠多加練習。
相關(guān)文章
JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件
有時會使用一些改變心情方面的想法,比如JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件,這樣就可以做到隨機加載心情文件,需要的朋友可以了解下2012-12-12JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用
JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用...2007-05-05分析Node.js connect ECONNREFUSED錯誤
最近在準備Angularjs +node.js demo的時候在我的mac開發(fā)中 遇見此錯誤2013-04-04javascript Function函數(shù)理解與實戰(zhàn)
小編給大家?guī)硪黄P(guān)于javascript的基礎(chǔ)教學內(nèi)容,關(guān)于Function函數(shù)的訓練與理解,一起學習下吧。2017-12-12JavaScript 中的執(zhí)行上下文和執(zhí)行棧實例講解
這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧實例講解,文中實例講解的很清晰,有感興趣的同學可以研究下2021-02-02javascript中數(shù)組array及string的方法總結(jié)
本文結(jié)合自己的使用經(jīng)驗,給大家總結(jié)了javascript中數(shù)組array及string的使用方法,這里推薦給有需要的小伙伴。2014-11-11