javascript怎麼設定cookie

在javascript中，可以使用document物件的cookie屬性來設定、讀取或刪除cookie，語法「document.cookie="cookieName=Value;expires=過期時間";」。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

1，什麼是cookie

    把web頁面載入到瀏覽器所使用的HTTP是一種"無狀態"協定,也是說，當伺服器把頁面傳送給瀏覽器之後，它就認為事物完成了，並沒有保存任何資訊。這給在瀏覽器會話期間維持某種連續性帶來了困難，例如記錄使用者已經造訪或下載過哪些內容，或記錄使用者在私有區域的登入狀態。

    cookie就是解決這個問題的一個方法。舉例來說，cookie可以記錄使用者的最後一次訪問，儲存使用者偏好設定的列表，或是當使用者繼續購物時儲存購物車裡的物品。在正確使用的情況下，cookie能夠改善網站的使用者體驗。

    cookie本身是一些短小的資訊串，能夠由頁面保存在使用者的電腦上，然後可以被其他頁面讀取。 cookie一般都設定在一定時間後失效。

cookie的限制

    瀏覽器對於能儲存的cookie數量有所限制，通常是數百個或多一點。一般情況下，每個網域20個cookies是允許的，而每個網域最多能保存4KB的cookie。

    除了大小限制可能導致的問題，有很多原因都可能導致硬碟上的cookie消失，例如到達有效期了，或是用戶清理cookie資訊了，或是換用其他瀏覽器了。因此，永遠都不應該使用cookie來保存重要數據，而且在編寫程式碼時一定要考慮到不能獲取到所期望cookie時的情況

2，document.cookie屬性

JavaScript使用document物件的cookie屬性來建立、讀取、刪除cookie。

每個cookie基本上就是一個由成對的名稱和值組成的字串，像下面這樣:

username=sam

    當頁面載入到瀏覽器裡，瀏覽器會收集與頁面相關的全部cookie，放到類似字串的document.cookie屬性裡。在這個屬性裡，每個cookie是以分號分隔的:

username=sam;location=China;

#我講document.cookie稱作"類似字串"的屬性，因為它並不是真正的字串，只是在提取當 cookie資訊時，這個屬性表現得像個字串而已

資料的編碼和解碼

    某些字元不能在cookie裡使用，包括分號，逗號以及空白符號(例如空格和製表符)。在把資料儲存到cookie之前，需要先對資料進行編碼，以便於實現正確的儲存。

    在儲存資訊之前，使用JavaScript的escape()函數進行編碼，而取得原始的cookie資料時就使用對應的unescape()函數進行解碼。

    excape()函數把字串裡任何非ASCII字元都轉換為對應的2位元或4為十六進位格式，例如空格轉換為 ,&轉換為&。

    舉例來說，下面的程式碼會輸出變數str裡保存的原始字串及escape()編碼以後的結果:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function hello(){
	var str = 'Here is a (short) piece of text.';
	document.write(str = 'ff9d32c555bb1d9133a29eb4371c1213' + escape(str));
	}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
64cb571ed5952d9b43da1f2d70a36e91hello owrld0b9f73f8e206867bd1f5dc5957dbcb38
a378d60a65ed2f7e1382e9de1336cde9
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

    可以看到空格被表示為，左括號是(,右括號是)。

3，cookie組成

    document.cookie裡的資訊看起來就像是由成對的名稱和值組成的字串，每一對資料的形式是:

name=value

    但實際上，每個cookie還包含其他一些相關信息，下面來分別介紹。

cookieName 和 cookieValue

    cookieName和cookieValue就是在cookie字串裡看到的name=value裡的名稱和值。

domain

    domain屬性向瀏覽器指明cookie屬於哪個網域。這個屬性是可選的，在沒有指定時，預設值是設定cookie的頁面所在的網域。

    這個屬性的功能在於控制子域對cookie的運作。距離來說，如果設定為www.example.com，那麼子網域code.example.com裡的頁面就不能讀取這個cookie。但如果domain屬性設定為example.com，那麼code.example.com裡的頁面就能造訪這個cookie了。

path

    path屬性指定可以使用cookie的目錄。如果只想讓目錄documents裡的頁面設定cookie的值，就把path設定為/documents。這個屬性是可選的，常用的預設路徑是/，表示cookie可以在整個網域中使用。

secure

    secure属性是可选的，而且几乎很少使用。它表示浏览器在把整个cookie发送给服务器时，是否应该使用SLL安全标准。

expires

    每个cookie都有一个失效日期，过期就自动删除了。expires属性要以UTC时间表示。如果没有设置这个属性，cookie的生命期就和当前浏览器会话一样长，会在浏览器关闭时自动删除。

4，编写cookie

    要编写新的cookie，只要把包含所需属性的值赋予document.cookie就可以了:

document.cookie = "username=sam;expires=15/05/2018 00:00:00"

    使用javascript的Date对象可以避免手工输入日期和时间格式；

var cookieDate = new Date(2018,05,15);
document.cookie = "username=sam;expires="+cookieDate.toUTCString();

    这样就能达到和前面一样的结果。

#注意这里使用了cookieDate.toUTCString()函数，而不是cookieDate.toString();这是因为cookie的时间要以UTC格式设置。

    在实际编码时，应该用excape()函数来确保在给cookie赋值时不会有非法字符:

var cookieDate = new Date(2018,05,15);
var user = "Sam Jones";
document.cookie = "username="+excape(user)+";expires="+cookieDate.toUTCString();

5，编写cookie的函数

    很自然就会想到编写一个函数专门用于生成cookie，完成编码和可选属性的组合操作。下面的程序清单就列出了一个这样的程序代码:

function createCookie(name,value,days,path,domain,secure){
	if(days){
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = date.toGMTString();
		}
		else var expires = "";
		cookieString = name + "=" +excape(value);
		if(expires) cookieString += ";expires=" +expires;
		if(path) cookieString += ";path=" + escape(path);
		if(domain) cookieString += ";domain=" + escape(domain);
		if(secure) cookieString += ";secure=" + escape(secure);
		document.cookie = sookieString;
		}

    这个函数的执行的操作是相当直观的，name和value参数组合得到"name = value",其中的value还经过编码以避免非法字符。

    在处理有效期时，使用的参数不是具体日期，而是cookie有效的天数。函数根据这个天数生成有效的日期字符串。

    其他属性都是可选的，如果设置了，就会附加到组成cookie的字符串里。

【推荐学习：javascript高级教程】

以上是javascript怎麼設定cookie的詳細內容。更多資訊請關注PHP中文網其他相關文章！