close


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)}

}

完整的原始碼如下：






function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setTime(exdate.getTime()+(expiredays*24*3600*1000))

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : "; expires="+exdate)

}
function checkCookie()

{

username=getCookie('username')

if (username!=null)

  {alert('Welcome again '+username+'!')}

else 

  {username=prompt('Please enter your name:',"")

  setCookie('username',username,365)}

}

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



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 easonyo 的頭像
    easonyo

    wEb 亂講

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

    E-mail轉寄