天天看點

Javascript如何操作(建立/讀取/删除)cookie

曲奇(小甜點),來源于英語cookie。

cookie這個詞想必很多做前段的朋友都接觸過,但是沒有詳細的了解以及操作過。如何的确如此,那麼就停下來了解一下如何通過js來操作cookie值吧!

通過本文你将粗略的明白cookie是什麼,如何通過js建立/存儲以及擷取cookie,如何讓cookie過期來删除cookie...

cookie 是存儲于通路者的計算機中的變量。每當同一台計算機通過浏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 javascript 來建立和取回 cookie 的值。 來自的解釋 某些 web 站點在您的硬碟上用很小的文本檔案存儲了一些資訊,這些檔案就稱為 cookie。 msie的幫助資訊

不同的浏覽器針對cookie操作的方式不一樣(比如ie是生成一個文本)。通俗一點的說,cookie就是比html進階一點的程式建立的,儲存在用戶端(就是你的電腦)來記錄使用者的一些資訊的東西。

每個cookie的結構都是這樣的 cookie的名字=cookie的值

cookie的名字與值的命名方面同js的命名規則差不多,隻不過多了“隻能用可以用在url編碼中的字元”,即如果儲存漢字的話,需要用escape()編碼,然後讀取的時候用unescape()解碼;

每個cookie都有過期時間,當電腦的時間過了給定的過期時間,這個cookie就會失效。js無法直接删除cookie值,但是可以通過設定失效日期來讓此cookie無法工作。

建立cookie的方法,用到的是documents.cookie屬性;給cookie指派的方法如下:

documents.cookie = ‘cookiename=‘ + escape(‘cookievalue‘)+ ‘;expires=‘ + expirationdateobj.togmtstring();

看到這些是否有些麻木呢?其實說明一下很簡單,cookiename是你的cookie的名字,比如“niumowang_cookie”;cookievalue是你的cookie的值,比如“牛魔王的世界觀”;expirationdateobj

是儲存過期時間的對象名,togmtstring()是将時間設定成gmt(格林尼治時間),cookie隻支援此時間格式。如果這裡不設定時間的話,預設是浏覽器關閉視窗cookie過期。

ok,我們來看一個儲存使用者名字的cookie示例,我們設定一個 “name”=“pizi”的cookie,并在2個月過期

function setcookie(){ var expires = new date(); expires.settime(expires.gettime() + 2 * 30 * 24 * 60 * 60 * 1000); /* 2個月 x  30 天 x  24 小時 x  60 分 x 60 秒 x  1000 毫秒 */ documents.cookie = ‘name=pizi;expires=‘ + expires.togmtstring(); }

上面的pizi沒有用escape編碼是因為,escape編碼後的結果就是escape

function delcookie (nameofcookie) { // 檢查cookie是否設定,如果設定了則将過期時間調到過去的時間; //thu, 01-jan-70 00:00:01 gmt,該時間為1970年1月1号 if (getcookie(nameofcookie)) { document.cookie = nameofcookie + "=" + "; expires=thu, 01-jan-70 00:00:01 gmt";

上面函數檢測是否設定了名字為

nameofcookie的cookie,如果設定的話将該cookie的失效日期調到1970年1月1号,這樣該cookie就會失效,剩下的就是浏覽器處理過期cookie的機制了。關于該時間,可以參考:

w3school有一些關于js操作cookie的教程,并附帶一個歡迎cookie的示例,有興趣的朋友去看下,位址:

下面是js操作cookie的示例示範:運作代碼會提示輸入使用者名,然後關閉打開的視窗再運作一次代碼會看到效果。或者另存為html檔案檢視示範

<html>

<head>

<script

type="text/javascript">

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)

(c_end==-1) c_end=document.cookie.length

return

unescape(document.cookie.substring(c_start,c_end))

""

function setcookie(c_name,value,expiredays)

var exdate=new

date()

exdate.setdate(exdate.getdate()+expiredays)

document.cookie=c_name+

"=" +escape(value)+

((expiredays==null) ? "" :

";expires="+exdate.togmtstring())

function checkcookie()

username=getcookie(‘username‘)

(username!=null && username!="")

{alert(‘welcome again

‘+username+‘!‘)}

else

username=prompt(‘please enter your

name:‘,"")

if (username!=null && username!="")

setcookie(‘username‘,username,365)

</script>

</head>

<body onload="checkcookie()">

</body>

</html>