線上教材：WEB 程式設計

一般來說，為了安全起見，JavaScript 不能對硬碟進行任何存取。但是透過 Cookie，可以在客戶端存取極少量的資料，例如使用者的瀏覽偏好等等。此時，所有的資料和相關的運算皆可以在客戶端的電腦儲存/進行，以減少對伺服器造成的負擔。但是，當客戶端更換電腦/瀏覽器，或者關閉 Cookie 功能時，就會造成 Cookie 的資訊流失，或者無法使用。

利用「navigator.cookieEnabled」，可以知道 Cookie 功能是否被關閉：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

if(navigator.cookieEnabled){
	document.write("此網頁的 cookie 是：" + document.cookie);
}
else {
	document.write("Cookie 設定被關閉或者不支援");
}

</script>

</body></html>
其中， Cookie 是一個字串，存放在「document.cookie」當中，格式如下：
name=value;expires=date;path=path;domain=domain;secure
每個參數的意義是：

name=value: Cookie 的名稱和對應的值，這個參數是當然必須的。

expires=date: Cookie 的有效時間，以 GMT (Greenwich Mean Time) 的格式指定時間。如果不指定這個參數，則有效時間是你關掉瀏覽器之前。

path=path: 可以存取該 Cookie 的路徑。如果不指定這個參數，則可存取該 Cookie 的路徑，即為設定 Cookie 的網頁所在的路徑。

domain=domain: 可以存取該 Cookie 的網域。如果不指定這個參數，則可存取該 Cookie 的網域，即為設定 Cookie 的網頁所在的網域。

secure: 指定 Cookie 只能傳送給伺服器。

以下範例展示如何寫入一些 Cookie：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

document.cookie = "123=xyz";
document.cookie = "123=ggg";
document.cookie = "abc=def";

document.write("此網頁的 Cookie 字串: " + document.cookie);

</script>

</body></html>
由此範例中，可以看出一些事實：

指定新的 value，則舊的會被蓋過去

當設定「document.cookie = "aaa=bbb"」時，並不是將 Cookie 資料洗掉重設，而是附加上去

如果要指定失效日期，則可用以下的方式：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

now = new Date();
expDate = new Date();
expDate.setTime(now.getTime() + 1000*10); // 十秒

document.cookie = "test=123;expires=" + expDate.toGMTString();

document.write("此網頁的 Cookie 字串: " + document.cookie);

</script>

</body></html>
在上述範例中，我們讓 Cookie 在十秒後消失。由於每次重新整理會指定新的時間，所以各位可以同時打開前一個範例，或者利用瀏覽器的開發者工具來輔助觀察。

所以，如果要刪除 Cookie，只要將失效時間設定為比當下還早即可。以下範例，會展示 Cookie 的設定、移除與查詢：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

function setCookie(name, value){
	document.cookie = name + "=" + value;
}

function delCookie(name){
	now = new Date();
	now.setTime(now.getTime() - 1);
	document.cookie = name + "=;expires=" + now.toGMTString();
}

function getCookie(name, valForm){
	cookieArr = document.cookie.split('; ');
	for( i=0; i<cookieArr.length; i++ ){
		thisCookie = cookieArr[i].split('=');
		thisName = thisCookie[0];
		thisVal = thisCookie[1];
		if( thisName == name ){
			valForm.value = thisVal;
			return;
		}
	}
	valForm.value = '';
}

</script>

<form>
	Cookie Name: <input type="text" id="cookieName"><br>
	Cookie Value: <input type="text" id="cookieVal"><br>
	<input type="button" value="設定"
		   onClick="setCookie(this.form.cookieName.value, this.form.cookieVal.value);">
	<input type="button" value="刪除"
		   onClick="delCookie(this.form.cookieName.value)">
	<input type="button" value="查詢"
		   onClick="getCookie(this.form.cookieName.value, this.form.cookieVal)">
</form>

</body></html>