JavaScript document.cookie

我們可以透過 document.cookie 來存取或取得 HTML DOM 文件物件模型中的 cookie,使用方式與其他 JavaScript Document 對像集合類似,以下我們準備一個簡單的範例,一次呈現設定、清除以及顯示 cookie。

JavaScript document.cookie 範例
<script type="text/javascript">
function SetCookie(x) {
if(x=='0'){
 document.cookie = "name=Jordan";
}else if(x=='1'){
 document.cookie = "name=";
}
}
function ShowCookie(){
 alert(document.cookie);
}
</script>
<input type="button" value="設定 Cookie" onclick="SetCookie(0);">
<input type="button" value="清除 cookie" onclick="SetCookie(1);">
<input type="button" value="Show Cookie" onclick="ShowCookie();">


這個範例總共會有三個按鈕,用來觸發 JavaScript 的 function,第一個按鈕將會觸發 SetCookie 這個 function 並設定 name="Jordan" 這樣的一個 Cookie 於瀏覽器中,第二個清除按鈕也是觸發 SetCookie(),但不同的是清除按鈕將會設定 name="" 這樣的值,也就是把 cookie 清掉的一種象徵意義,另三個按鈕就是顯示目前瀏覽器中的 cookie 有哪些?

範例中的兩個 function 都是使用了  JavaScript document.cookie 的屬性來設定、清除或取得 cookie 的值,在操作此範例的同時,請確認一下你的瀏覽器中 cookie 是否已清除,若無清除也沒關係,頂多就是在 ShowCookie 的時候顯示不相關的 cookie 而已,另外要注意的是每個瀏覽器所能儲存的 cookie 數量有限,如果存滿了,可能無法正常運作,有必要的話就清一清吧!

延伸閱讀
JavaScript Document
PHP Cookies 使用說明 setcookie
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012