如何使用jQuery或者javascript处理Cookie

Cookie是我们做前台开发过程中时常需要用到的技术，做为HTML5之前客户端唯一可以使用的本地存储方式，它能够有效的帮助我们实现一些简单数据的本地保存。今天我们介绍使用Javascript和jQuery方式来处理和保存Cookie。

Javascript

javascript处理cookie：

function setCookie(name,value,days) {
 
    if (days) {
 
        var date = new Date();
 
        date.setTime(date.getTime()+(days*24*60*60*1000));
 
        var expires = "; expires="+date.toGMTString();
 
    }
 
    else var expires = "";
 
    document.cookie = name+"="+value+expires+"; path=/";
}
 
function getCookie(name) {
 
    var nameEQ = name + "=";
 
    var ca = document.cookie.split(';');
 
    for(var i=0;i < ca.length;i++) {
 
        var c = ca[i];
 
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
 
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 
    }
 
    return null;
}
 
function deleteCookie(name) {
 
    setCookie(name,"",-1);
}
/*
 
  Changed function names from readCookie(), createCookie()
 
  and eraseCookie() to getCookie(), setCookie() and
 
  deleteCookie().
*/

 

以下代码将调用以上cookie处理方法：

 

// Create/write a cookie and store it for 1 day
setCookie('myCookie', 'myValue', 1);
// Get my cookie
getCookie('myCookie');
// Delete/erase my cookie
deleteCookie('myCookie');

 

jQuery

jQuery本身没有相关处理Cookie的方法，但是使用某些插件我们同样可以处理cookie，这里我们使用一个特别的jQuery插件：Cookie plugin

设置cookie：

$(document).ready(function(){          
        // 设置一个网站cookie, 浏览器重启后会丢失         
        $.cookie("website","GBin1.com");          
        // 设置另外一个demo cookie         
        $.cookie("demo",text,{expires: 7, path: '/', domain: 'www.gbin1.com'});          
        // "text" 是cookie值
});

 

读取cookie：

$(document).ready(function(){          
        // 取得 website cookie:         
        var str = $.cookie("website");          
        // str 现在等于 GBin1.com 
});

 

删除Cookie：

$(document).ready(function(){          
        // 删除cookie
        var str = $.cookie("website",null);          
        // No more kittens 
});

 

使用增加版本，你可以同时处理多个cookie，如下：

// 设置多个cookies
$.cookie({ 'cookie1':'value1', 'cookie2':'value2' });