什么是 cookie？
cookie 就是頁面用來保存信息，比如自動登錄、記住用戶名等等。
cookie 的特點
- 同個網站中所有的頁面共享一套 cookie
- cookie 有數量、大小限制
- cookie 有過期時間jquery.cookie.js 是一款輕量級的 cookie 插件，可以讀取，寫入和刪除 cookie。本文主要針對
jquery.cookie.js 的用法進行詳細的介紹。
jquery.cookie.js 使用方法
Cookies
定義：讓網站服務器把少量數據儲存到客戶端的硬盤或內存，從客戶端的硬盤讀取數據的一種技術；
下載與引入:jquery.cookie.js基於jquery；先引入jquery，再引入：jquery.cookie.js；
下載：http://plugins.jquery.com/cookie/
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
使用：
1.添加一個"會話cookie"
$.cookie('the_cookie', 'the_value');
這里沒有指明 cookie有效時間，所創建的cookie有效期默認到用戶關閉瀏覽器為止，所以被稱為 “會話cookie（session cookie）”。
2.創建一個cookie並設置有效時間為 7天
$.cookie('the_cookie', 'the_value', { expires: 7 });
這里指明了cookie有效時間，所創建的cookie被稱為“持久 cookie （persistent cookie）”。注意單位是：天；
3.創建一個cookie並設置 cookie的有效路徑
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在默認情況下，只有設置 cookie的網頁才能讀取該 cookie。如果想讓一個頁面讀取另一個頁面設置的cookie，必須設置cookie的路徑。cookie的路徑用於設置能夠讀取 cookie的頂級目錄。將這個路徑設置為網站的根目錄，可以讓所有網頁都能互相讀取 cookie （一般不要這樣設置，防止出現沖突）。
4.讀取cookie
$.cookie('the_cookie');
5.刪除cookie
$.cookie('the_cookie', null); //通過傳遞null作為cookie的值即可
6.可選參數
|
1
2
3
4
5
6
|
$.cookie(
'the_cookie'
,
'the_value'
,{
expires:7,
path:
'/'
,
domain:
'jquery.com'
,
secure:
true
})
|
expires：（Number|Date）有效期；設置一個整數時，單位是天；也可以設置一個日期對象作為Cookie的過期日期；
path：（String）創建該Cookie的頁面路徑；
domain：（String）創建該Cookie的頁面域名；
secure：（Booblean）如果設為true，那么此Cookie的傳輸會要求一個安全協議，例如：HTTPS；
使用方法：
設置 cookie：
|
1
|
$.cookie(
'the_cookie'
,
'the_value'
);
|
注：如果 $.cookie 沒有第三個參數，那么當瀏覽器關閉時，該 cookie 將會自動刪除。
設置一個有效期為 7 天的 cookie：
|
1
|
$.cookie(
'the_cookie'
,
'the_value'
, {expires: 7});
|
注：$.cookie 第三個參數是一個對象，除了可以設置有效期（expires: 7），還可以設置有效路徑（path: '/'）、有效域（domain: 'jquery.com'）及安全性（secure: true）。
讀取 cookie：
|
1
|
$.cookie(
'the_cookie'
);
|
注：如果沒有該 cookie，返回 null。
刪除 cookie：
|
1
|
$.cookie(
'the_cookie'
,
null
);
|
我們只需要給需要刪除的 cookie 設置為 null，就可以刪除該 cookie。
最后附上源代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie =
function
(name, value, options) {
if
(
typeof
value !=
'undefined'
) {
// name and value given, set cookie
options = options || {};
if
(value ===
null
) {
value =
''
;
options = $.extend({}, options);
// clone object since it's unexpected behavior if the expired property were changed
options.expires = -1;
}
var
expires = '
';
if (options.expires && (typeof options.expires == '
number
' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == '
number
') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '
; expires=
' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// NOTE Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '
; path=
' + (options.path) : '
';
var domain = options.domain ? '
; domain=
' + (options.domain) : '
';
var secure = options.secure ? '
; secure
' : '
';
document.cookie = [name, '
=
', encodeURIComponent(value), expires, path, domain, secure].join('
');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '
') {
var cookies = document.cookie.split('
;
');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '
=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break
;
}
}
}
return
cookieValue;
}
};
|