公告版位


cookie 通常是用來辨識使用者


範例

建立一個歡迎的 cookie


什麼是 Cookie?

cookie 是一個會儲存使用者電腦裏的變數。每一次同樣的電腦以瀏灠器請求網頁時,它同樣的也會傳 cookie。 有了 JavaScript, 你可以同時建立及回覆 cookie 的值。

cookies 的例子:

  • 名稱 cookie - 當有使用者第一次瀏灠你的網頁時,他或是她必須填寫其姓名。這個名字就會被儲存成一個 cookie. 下一次當使用者再來瀏灠你的網頁時,對方可以得到一個歡迎的訊息, 像這樣"歡迎!張三!",這個名字是從儲存的 cookie中回覆的!
  • 密碼 cookie - 當有使用者第一次瀏灠你的網頁時,他或是她必須填寫其密碼。這個密碼隨後會被儲存成一個 cookie。下一次對方再來瀏灠你的網頁時密碼就會從 cookie 中回覆。
  • 日期 cookie - 當有使用者第一次瀏灠你的網頁時,現行的日期會被存成一個 cookie. 下一次對方再來瀏灠你的網頁時,他可能得到這樣的一個訊息"你上一次來訪的時間是星期二,8月11日, 2005"這個日期是從儲存的 cookie 中回覆的。

建立及儲存 Cookie

在這個例子裏,我們會建立一個可以儲存瀏灠者的名字 cookie 當對方首次瀏灠你的網頁時,會被要求填寫名字。這個名字接著會被存成一個 cookie. 下一次當對方再來瀏灠同樣的網頁時,他就會得到一個歡迎訊息。

首先我們建立一個功能 (function) ,這個功能可以儲存使用者的名字的在 cookie 變數裏。

function setCookie(c_name,value,期限日期)
{
var exdate=new Date()
exdate.setDate(expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate)
}

上述 function 的參數記住了名字的 cookie , cookie 的值,及有效的日期,一直到 cookie 過期為止。

在以上的function 裏我們首先將天數轉換成有效的日期,然後我們增加天數直到cookie過期為止. 之後在document.cookie 物件裏我們儲存 cookie 的名字, cookie 值及過期日期。

然後,我們建立另一個 function 它會檢查 cookie 是否已被設好:

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}

上述的 function 首先檢查cookie是否全部儲存在document.cookie 物件裏。如果 document.cookie 物件記住了一些 cookies,然後檢查看看是否特定的 cookie 已經儲存。若有找到 cookie ,接著將值傳回,如果沒有,則傳回空白。

最後,我們建立一個能夠顯示一個已儲存的 cookie歡迎訊息的 function ,如果沒有沒有儲存cookie ,它將會顯示一個提示小視窗,要求輸入使用者的名字。

function checkCookie()
{
username=getCookie('username')
if (username!=null)
{alert('Welcome again '+username+'!')}
else
{username=prompt('Please enter your name:',"")
setCookie('username',username,365)}
}

完整的原始碼如下:







當網頁一被下載,上述的程式碼會執行 checkCookie() 的功能。



創作者介紹
創作者 easonyo 的頭像
easonyo

wEb 亂講

easonyo 發表在 痞客邦 留言(1) 人氣()


留言列表 (1)

發表留言
  • 萱
  • 你好押,我正在進行一個旅遊不花錢的計畫,給你參考一下
    如果你也有興趣,我們可以一起完成這個夢想唷^^
    http://www.im.tv/blog/2606571/67199
    我的msn:whappycloudHOTMAIL .com
    祝你有個愉快的一天!