JavaScript進(jìn)階教程(第二課續(xù))第2/2頁
更新時(shí)間:2007年04月06日 00:00:00 作者:
如果你想讓你的cookie包含更多的信息,你可以將cookie的值設(shè)得很長.假設(shè)我們要保存某人的姓名,年齡和電話號(hào)碼:
var the_cookie = "username:thau/age:older than the hills/phone:411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
我用斜杠/來分割屬性名稱,用分號(hào)區(qū)別不同的屬性名稱及其屬性值.斜杠/和分號(hào)是不是絕對的選擇,你可以使用任何的字符做分割的標(biāo)志,比如:
var the_cookie = "username=thau&age=older than the hills&phone=411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
你可以自行選擇限位器.只要你注意在對cookie解碼時(shí)也使用同樣的限位器即可.
設(shè)置復(fù)雜的cookie時(shí)方法要復(fù)雜一些.我們建議你使用相關(guān)數(shù)組來保存所有的信息,假設(shè)我們將該cookie保存到某人的硬盤上:
my_happy_cookie=username:thau/age:older than the hills/phone:411
你可以將這些信息放到一個(gè)方便的相關(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);
然后你就會(huì)正確設(shè)置了cookie_information["username"],cookie_information["age"], 和cookie_information["phone"].
這些看起來可能有些難以理解,但實(shí)際上并不是很難.我們一步步分析:
var the_cookie = document.cookie;
將cookie賦值給一個(gè)變量.
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("/");
生成一個(gè)包含3個(gè)元素名為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個(gè)元素.
property_value = separated_values[loop];
提取當(dāng)前的name:value配對,第1個(gè)配對是username:thau.
var broken_info = property_value.split(":");
將該配對分成名為broken_info的數(shù)組中的兩個(gè)元素:
broken_info[0] = "username"
broken_info[1] = "thau"
var the_property = broken_info[0];
第1次經(jīng)過這個(gè)循環(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)在當(dāng)你需要從cookie中查找username時(shí)你只需:
var the_name = the_info["username"];
每次經(jīng)過這個(gè)循環(huán)時(shí),就在the_info中加入一個(gè)新元素.循環(huán)到最后時(shí),
the_info["username"] = "thau",
the_info["age"] = "old as the hills" ,
而 the_info["phone"] = 411.
有些煩瑣,但是當(dāng)你需要從cookie中輸出入大量信息時(shí)這是一個(gè)很好的辦法.當(dāng)然還有別的辦法.那就是使用多重cookies.
保存多重cookies的方法很直觀.每一個(gè)cookie都有一個(gè)名稱.上一個(gè)例子中的cookie的名稱是my_happy_cookie,我們可以這樣:
var the_cookie ="my_happy_cookie=happiness_and_joy";
document.cookie =the_cookie;
要保存多重cookie,只需給每個(gè)cookie一個(gè)不同的名字.如果你要加入一個(gè)新的cookie,設(shè)置document.cookie時(shí)并不會(huì)刪除前面已經(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)在你需要訪問這兩個(gè)cookies,有些復(fù)雜,所以你需要明了整個(gè)過程.假設(shè)你執(zhí)行了上面的代碼,現(xiàn)在想訪問my_happy_cookie.如果你查看document.cookie的內(nèi)容,你會(huì)看到:
my_happy_cookie=happiness_and_joy;
my_other_cookie=more_joy_more_happiness;
這樣很直觀,但是如果你想訪問某個(gè)特定的cookie則有些困難.下面的代碼可以幫助你找出某個(gè)特定的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;
}
}
下面我們將學(xué)習(xí)一下cookies可以做的真正酷的內(nèi)容。
現(xiàn)在你已經(jīng)學(xué)會(huì)了如何設(shè)置和讀取基本的cookie.然而基本的cookie常常在用戶關(guān)閉他的瀏覽器時(shí)會(huì)被自動(dòng)刪除.有時(shí)候這樣最好因?yàn)橥ǔ5挠蛑辉试S在用戶的機(jī)器上保留20個(gè)cookie.但是如果你希望將cookie保存在用戶的機(jī)器上你需要設(shè)置一個(gè)cookie失效的時(shí)間,它的格式是一種叫做GMT的特殊格式.例如:
Mon, 27-Apr-1998 00:00:00 GMT
要正確設(shè)置GMT不是一件容易的事,你需要計(jì)算好某個(gè)日期是星期幾.好在Javascript有一個(gè)日期的方法叫做toGMTString可以幫助你.下面是設(shè)定遠(yuǎn)期的某個(gè)時(shí)間的一個(gè)例子:
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,然后用分號(hào)分割不同的cookie.
下面是一個(gè)如何建立有效期直至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之后,它將在用戶的機(jī)器中存在直到失效期.如果你將某個(gè)cookie的失效期設(shè)置得比當(dāng)前時(shí)間還早,該cookie實(shí)際上不能在用戶的機(jī)器上存活.
此外,還有兩個(gè)注意的事項(xiàng):路徑(path)和域(domain)。
這是掌握cookie最后的一個(gè)障礙:缺省情況下cookie只能被在同一個(gè)Web服務(wù)器上同一個(gè)路徑下設(shè)置了該cookie的網(wǎng)頁讀取.例如,如果在"http://chimp.webmonkey.com/food/bananas/banana_puree.htm"有一段Javascript詢問了用戶的姓名,你可能需要在你的另一個(gè)網(wǎng)頁例如主頁中訪問一個(gè)給定的名字.所以你必須設(shè)定該cookie的路徑.路徑"path"用于設(shè)置可以讀取一個(gè)cookie的最頂層的目錄.將cookie的路徑設(shè)置為你的網(wǎng)頁最頂層的目錄可以讓該該目錄下的所有網(wǎng)頁都能訪問該cookie.
方法:在你的cookie中加入path=/; 如果你只想讓"food" 目錄中的網(wǎng)頁可以使用該cookie,則你加入path=/food;.還有一點(diǎn):有些網(wǎng)站有許多小的域名,例如網(wǎng)猴可能還在"chimp.webmonkey.com," "gorilla.webmonkey.com," 和"ape.webmonkey.com." 域名下有網(wǎng)頁.缺省情況下只有"chimp.webmonkey.com" 域下的網(wǎng)頁可以讀取該cookie.如果你向讓"webmonkey.com"下的所有機(jī)器都可以讀取該cookie,我們必須在cookie中加入 "domain=webmonkey.com" .
要將一個(gè)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)學(xué)習(xí)完了cookie的內(nèi)容.希望你能夠多加練習(xí)。
相關(guān)文章
JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件
有時(shí)會(huì)使用一些改變心情方面的想法,比如JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件,這樣就可以做到隨機(jī)加載心情文件,需要的朋友可以了解下2012-12-12javascript處理a標(biāo)簽超鏈接默認(rèn)事件的方法
這篇文章主要介紹了javascript處理a標(biāo)簽超鏈接默認(rèn)事件的方法,涉及event.preventDefault()方法阻止默認(rèn)事件的使用技巧,需要的朋友可以參考下2015-06-06JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用
JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用...2007-05-05分析Node.js connect ECONNREFUSED錯(cuò)誤
最近在準(zhǔn)備Angularjs +node.js demo的時(shí)候在我的mac開發(fā)中 遇見此錯(cuò)誤2013-04-04javascript Function函數(shù)理解與實(shí)戰(zhàn)
小編給大家?guī)硪黄P(guān)于javascript的基礎(chǔ)教學(xué)內(nèi)容,關(guān)于Function函數(shù)的訓(xùn)練與理解,一起學(xué)習(xí)下吧。2017-12-12JavaScript 中的執(zhí)行上下文和執(zhí)行棧實(shí)例講解
這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧實(shí)例講解,文中實(shí)例講解的很清晰,有感興趣的同學(xué)可以研究下2021-02-02javascript中數(shù)組array及string的方法總結(jié)
本文結(jié)合自己的使用經(jīng)驗(yàn),給大家總結(jié)了javascript中數(shù)組array及string的使用方法,這里推薦給有需要的小伙伴。2014-11-11