返回列表下一主題上一主題發帖

[教學] (教學第27篇) 使用 Cookies 上篇

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-23

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 倒序看帖

打印

字體大小: tT

發表於 2010-5-19 07:55 | 只看該作者

[教學] (教學第27篇) 使用 Cookies 上篇

什麼是「Cookies」？Cookies就是吃的小餅乾ㄚ！不是啦！Cookies是網站（網頁）在使用者端(client)，也就是你的硬碟中所儲存的一小段資訊！它可以記錄你瀏覽網站時的一些資訊，使網站變聰明，當你再度光臨網站時，或許你會發現網站竟然知道你是誰、叫什麼名字、住在哪裡…！現在，很多的網站都已經利用這種Cookies技術來記住訪客的瀏覽習慣。

Cookies是在我們使用瀏覽器開始遨遊網路時，被建立或取用，當你關閉瀏覽器，結束瀏覽時，它依然存活在你的電腦裡，這些Cookies檔案在哪裡？以IE為例，它們就在『\WINDOWS\Temporary Internet Files』目錄裡：

在本篇中將為大家介紹如何儲存Cookies、如何取用Cookies裡的資訊及如何刪除Cookies。

提示！！
一個Cookie檔案能儲存近300個Cookies，而每個Cookies約可儲存4000個位元組的資料。

儲存Cookies
Cookies的操作是必須透過「物件」來處理的，靠哪一個物件？當然是靠document囉。

document.cookie

複製代碼

寫入到Cookie檔案裡的Cookies資訊格式如下：
Cookie資訊格式

name= valie;[expires=data;[path=path;[domain=domain[secure;]]]]”

複製代碼

名稱=資料; 到期時間=日期;路徑=儲存路徑; 網址=製作Cookies的網域

複製代碼

在使用Cookies時，名稱（name）參數一定要有，至於寫入的資料就不一定是必須的，但是，我們若只指定名稱（name）參數，而沒有在指定其他的參數（寫入的資料），則Cookies將只存在於瀏覽器之中，並沒有被寫入瀏覽者的硬碟裡，也就是說，當瀏覽器必關閉時，這個Cookies就煙消雲散了！

下面這個程式例子將可以在網頁載入時記錄瀏覽網頁的開始日期與時間：

<SCRIPT LANUAGE=”JavaScript”>
begindate = new Date()
document.cookie = “webtime=”+excape(begindate)
</SCRIPT>

複製代碼

當我們指定給Cookies資料時，這個資料內不能含有特殊字元或符號，例如：逗號或分號，甚至是「空白（space）」，如果資料中含有特殊字元或符號，就必須使用escape()函式來處理這些特殊字元或符號（中文字其實也是），如上例，我們就將日期與時間資料以escape()函式來預先處理。

實作學習：
製作一個JavaScript程式，使用Cookies記錄瀏覽者的姓名。

<HTML>
<HEAD>
<TITLE>儲存Cookies</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
name=”user”
//出現詢問視窗
username=prompt("請問您的姓名？","無名氏")
//如果有填寫姓名
if (username)
{
//寫入Cookies的資料為name=姓名
document.cookie=name + "=" + escape(username)
document.write("您的姓名是:"+username)
}
//如果沒有填寫姓名
else
{
//寫入Cookies的資料為name=神秘人
document.cookie=name + "=" + escape("神秘人")
document.write("您的姓名是:神秘人")
}
</SCRIPT>
</BODY>
</HTML>

複製代碼

當網頁載入時將出現一個輸入對話視窗（程式碼第8行）：

下載 (5.35 KB)

2010-5-19 07:55
在寫入Cookies之前，先檢驗一下輸入對話視窗是否有回傳資料，如果有，則將回傳資料寫入Cookies（程式碼第14行），如果沒有，則預設寫入Cookies的資料值是「神秘人」（程式碼第22行）！

下載 (38.27 KB)

2010-5-19 07:56

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-23

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-19 08:00 | 只看該作者

設定Cookies的使用期限
之前我們說過：若只指定名稱（name）參數，而沒有在指定其他的參數（寫入的資料），則Cookies將只存在於瀏覽器之中。如何證明？雖然我們將瀏覽器關閉，因為瀏覽器有設定「快取記憶」，所以我們仍然看得到曾經瀏覽的網頁，如下圖，可是就只有網頁而已，並沒有Cookies檔案：

提示！！
瀏覽器的「快取記憶」只有在「執行瀏覽」時才會生效，若你使用「開啟舊檔」的方式觀看網頁(檔案=>開啟舊檔)，則「快取記憶」是沒有作用的。

因此，你要讓Cookies的資訊真正的獨立記錄在Cookie檔案中，除了名稱（name）參數外，必須再加上其他的參數！除名稱參數之外，最常加入Cookies中的參數就是「expires（到期日）」。

假設，我們希望Cookies的到期日為瀏覽者第一次參觀網頁之後的一年時，則我們可以設定一個到期日的日期物件，如下：

begindate = new Date()
enddate =new Date()
enddate.setDate = beginDate.getDate + 365

複製代碼

上例中，我們設定了兩個日期物件，begindate日期物件用來得知瀏覽者參觀網頁參觀網頁的日期，而enddate日期物件的日期則為Cookies的到期日，我們利用getDate()方法，先取得begindate日期物件的日期，加上365天後，再以setDate()方法將Cookies的日期設定給enddate日期物件。

當我們以「expires（到期日）」參數來設定Cookies的到期日時，到期日的格式必須使用GMT（格林威治時間）的格式來表示：

week, day mon year hh:mm:ss GMT

複製代碼

例如：

Tue, 15 Dec 2000 20:25:30 GMT

複製代碼

若要將日期格式轉換成GMT格式的字串，則我們可以使用Date()日期時間物件的 toGMTString()方法。

實作學習：
製作一個JavaScript程式，使用Cookies記錄瀏覽者的姓名，並指定Cookies的到期日。

<HTML>
<HEAD>
<TITLE>Cookies使用期限</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//建立日期時間物件
begindate = new Date()
enddate =new Date()
//設定Cookies到期日
enddate.setDate ( begindate.getDate() + 365)
name=”username”
//出現詢問視窗
username=prompt("請問您的姓名？","無名氏")
//如果有填寫姓名
if (username)
{
//寫入Cookies的資料為姓名及到期日
document.cookie=name + "=" + escape(username) + "; expires="+ enddate.toGMTstring()
document.write("您的姓名是:"+username)
}
//如果沒有填寫姓名
else
{
//寫入Cookies的資料為神秘人及Cookies到期日
document.cookie=name + "=" + escape("神秘人") + "; expires="+ enddate.toGMTString()
document.write("您的姓名是:神秘人")
}
</SCRIPT>
</BODY>
</HTML>

複製代碼

網頁執行瀏覽後，『\WINDOWS\Temporary Internet Files』目錄中果然出現了獨立的Cookie檔案！

提示！！
所有的Cookie檔案都有一個預設的網域與路徑，只有建立此Cookie的網域與路徑才能存取這個Cookie檔案。

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

靜思自在 : 君子立恆志，小人恆立志。

返回列表下一主題上一主題