利用jQuery 操作網頁Cookies

瀏覽器暫存cookie可以做很多事，只要你拿得到，存得到。
本文將示範如何對瀏覽器cookie增、刪、改、查。

去除煩瑣的js操作，我們使用現成的jQuery plugin

Step1: 確認你的程式中引用了jQuery

Step2: 加入以下plugin程式碼

jQuery.cookie = function (name, value, options) {
          if (typeof value != 'undefined') {
              options = options || {};
              if (value === null) {
                  value = '';
                  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();
              }
              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 {
              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]);
                      if (cookie.substring(0, name.length + 1) == (name + '=')) {
                          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                          break;
                      }
                  }
              }
              return cookieValue;
          }
      }

jQuery.cookie = function (name, value, options) {

if (typeof value != 'undefined') {

options = options || {};

if (value === null) {

value = '';

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();

}

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 {

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]);

if (cookie.substring(0, name.length + 1) == (name + '=')) {

cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

break;

}

return cookieValue;

}

其實這段程式碼也不難理解，他就是將存取cookie的操作包在一個function中，此function判斷傳入的值來做相對應的事。

Step3: 開始操作cookies

新增Cookie：下列程式代表要新增一個名為cookieName的cookie，並且他的值為1，然後cookie過期時間為七天。若要創建一個session cookie(在該是窗關閉時即會清除cookie)，那麼我們就用第二行程式碼(不給逾期時間)。

$.cookie('cookieName','1',{expires: 7});
$.cookie('cookieName','1');

1 2	$.cookie('cookieName','1',{expires: 7}); $.cookie('cookieName','1');

修改Cookie：下列程式碼表示要修改一個叫做cookieName的cookie，把他的值設定為2。

$.cookie('cookieName','2');

1	$.cookie('cookieName','2');

刪除Cookie：下列程式碼代表要刪除一個叫做cookieName的cookie的值。

$.cookie('cookieName',null);

1	$.cookie('cookieName',null);

十分容易操作!

[JS] Add, Edit, Delete Cookies

留言

撰寫回覆或留言取消回覆