jquery.cookie用法詳細(xì)解析

2019-11-20 21:26:30

字體：大中小

供稿：網(wǎng)友

Cookie是由服務(wù)器端生成，發(fā)送給User-Agent（一般是瀏覽器），瀏覽器會(huì)將Cookie的key/value保存到某個(gè)目錄下的文本文件內(nèi)，下次請(qǐng)求同一網(wǎng)站時(shí)就發(fā)送該Cookie給服務(wù)器（前提是瀏覽器設(shè)置為啟用cookie）。

例如購(gòu)物網(wǎng)站存儲(chǔ)用戶曾經(jīng)瀏覽過(guò)的產(chǎn)品列表，或者門戶網(wǎng)站記住用戶喜歡選擇瀏覽哪類新聞。在用戶允許的情況下，還可以存儲(chǔ)用戶的登錄信息，使得用戶在訪問(wèn)網(wǎng)站時(shí)不必每次都鍵入這些信息？

怎么在js/jquery中操作處理cookie那？今天分享一個(gè)cookie操作類--jQuery.Cookie.js，是一個(gè)輕量級(jí)的Cookie管理插件。

Cookie下載地址： http://plugins.jquery.com/project/cookie.

特別提醒，今日發(fā)現(xiàn)一個(gè)特別的錯(cuò)誤，google瀏覽器提示：has no method $.cookie。火狐瀏覽器提示:$.cookie is not a function;調(diào)試了半天，終于找到原因，如果同一個(gè)頁(yè)面兩次或者多次引入Jquery插件就會(huì)報(bào)此錯(cuò)誤。

　　使用方法：

　　1、引入jQuery與jQuery.Cookie.js插件。

復(fù)制代碼代碼如下:

<script src="jQuery.1.8.3.js" type="text/javascript"></script> 
<script src="jquery.cookie.js" type="text/javascript"></script>

2.將cookie寫入文件

 var COOKIE_NAME = 'username';    if( $.cookie(COOKIE_NAME) ){      $("#username").val( $.cookie(COOKIE_NAME) );    }    $("#check").click(function(){      if(this.checked){        $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });        //var date = new Date();        //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的這個(gè)時(shí)候過(guò)期        //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });      }else{        $.cookie(COOKIE_NAME, null, { path: '/' }); //刪除cookie      }    });

函數(shù)。

　　　語(yǔ)法：$.cookie(名稱,值,[option])

　　　(1)讀取cookie值

　　　$.cookie(cookieName)　　　　　　　　　cookieName:要讀取的cookie名稱。

示例：$.cookie("username"); 讀取保存在cookie中名為的username的值。

　　　(2)寫入設(shè)置Cookie值：

　　　$.cookie(cookieName,cookieValue);　　cookieName:要設(shè)置的cookie名稱，cookieValue表示相對(duì)應(yīng)的值。

　　　示例:$.cookie("username","admin"); 將值"admin"寫入cookie名為username的cookie中。

　　　　　 $.cookie("username",NULL);　　　銷毀名稱為username的cookie

　　　(3) [option]參數(shù)說(shuō)明：

　　　　　expires:　　有限日期，可以是一個(gè)整數(shù)或一個(gè)日期(單位：天)。　　這個(gè)地方也要注意，如果不設(shè)置這個(gè)東西，瀏覽器關(guān)閉之后此cookie就失效了

　　　　　path:　　　 cookie值保存的路徑，默認(rèn)與創(chuàng)建頁(yè)路徑一致。

domin: cookie域名屬性，默認(rèn)與創(chuàng)建頁(yè)域名一樣。　　這個(gè)地方要相當(dāng)注意，跨域的概念，如果要主域名二級(jí)域名有效則要設(shè)置　　".xxx.com"

secrue:　　一個(gè)布爾值，表示傳輸cookie值時(shí)，是否需要一個(gè)安全協(xié)議。

　　　　　示例：

復(fù)制代碼代碼如下:

$.cookie("like", $(":radio[checked]").val(), { 
        　　path: "/", expiress: 7 
        })

一個(gè)完整設(shè)置與讀取cookie的頁(yè)面代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>jQuery學(xué)習(xí)2</title>   <script src="jQuery.1.8.3.js" type="text/javascript"></script>   <script src="jquery.cookie.js" type="text/javascript"></script>   <script type="text/javascript">     $(function () {       $("#username").val($.cookie("username"));       if ($.cookie("like") == "劉德華") {         $(":radio[value='劉德華']").attr("checked", 'checked')       }       else {         $(":radio[value='張學(xué)友']").attr("checked", 'checked')       }       $(":button").click(function () {         $.cookie("username", $("#username").val(), {           path: "/", expires: 7         })         $.cookie("like", $(":radio[checked]").val(), {           path: "/", expiress: 7         })       })     })   </script> </head> <body>   <p><input type="text" id="username" value="" /></p>   <p>     <input type="radio" name="like" value="劉德華" />劉德華     <input type="radio" name="like" value="張學(xué)友" />張學(xué)友   </p>   <p><input type="button" value="保存" /></p> </body> </html>

cookie本質(zhì)上是一個(gè)txt文本，因此只能夠存入字符串，對(duì)象通常要序列化之后才能存入cookie，而取的時(shí)候要反序列才又能得到對(duì)象。

$(function () {      if ($.cookie("o") == null) {        var o = { name: "張三", age: 24 };        var str = JSON.stringify(o);　　//對(duì)序列化成字符串然后存入cookie        $.cookie("o", str, {          expires:7  //設(shè)置時(shí)間，如果此處留空，則瀏覽器關(guān)閉此cookie就失效。        });        alert("cookie為空");      }      else {        var str1 = $.cookie("o");        var o1 = JSON.parse(str1);　　//字符反序列化成對(duì)象        alert(o1.name);　　　　　　　　//輸反序列化出來(lái)的對(duì)象的姓名值      }    })

一個(gè)輕量級(jí)的cookie插件，可以讀取、寫入、刪除cookie。

jquery.cookie.js的配置

首先包含jQuery的庫(kù)文件，在后面包含jquery.cookie.js的庫(kù)文件

使用方法

新添加一個(gè)會(huì)話cookie：

$.cookie('the_cookie', 'the_value');

注：當(dāng)沒有指明cookie有效時(shí)間時(shí)，所創(chuàng)建的cookie有效期默認(rèn)到用戶關(guān)閉瀏覽器為止，所以被稱為“會(huì)話cookie（session cookie）”

創(chuàng)建一個(gè)cookie并設(shè)置有效時(shí)間為7天:

$.cookie('the_cookie', 'the_value', { expires: 7 });

注：當(dāng)指明了cookie有效時(shí)間時(shí)，所創(chuàng)建的cookie被稱為“持久cookie（persistent cookie）”。

創(chuàng)建一個(gè)cookie并設(shè)置cookie的有效路徑：

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

注：在默認(rèn)情況下，只有設(shè)置cookie的網(wǎng)頁(yè)才能讀取該cookie。如果想讓一個(gè)頁(yè)面讀取另一個(gè)頁(yè)面設(shè)置的cookie，必須設(shè)置cookie的路徑。

cookie的路徑用于設(shè)置能夠讀取cookie的頂級(jí)目錄。將這個(gè)路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁(yè)都能互相讀取cookie（一般不要這樣設(shè)置，防止出現(xiàn)沖突）

讀取cookie:

$.cookie('the_cookie');

// cookie存在 => 'the_value' $.cookie('not_existing'); // cookie不存在 => null

刪除cookie，通過(guò)傳遞null作為cookie的值即可：

$.cookie('the_cookie', null);

相關(guān)參數(shù)的解釋

expires: 365

定義cookie的有效時(shí)間，值可以是一個(gè)（從創(chuàng)建cookie時(shí)算起，以天為單位）或一個(gè)Date。

如果省略，那么創(chuàng)建的cookie是會(huì)話cookie，將在用戶退出瀏覽器時(shí)被刪除。

path: '/'

默認(rèn)情況：只有設(shè)置cookie的網(wǎng)頁(yè)才能讀取該cookie。

定義cookie的有效路徑。默認(rèn)情況下，該參數(shù)的值為創(chuàng)建cookie的網(wǎng)頁(yè)所在路徑（標(biāo)準(zhǔn)瀏覽器的行為）。

如果你想在整個(gè)網(wǎng)站中訪問(wèn)這個(gè)cookie需要這樣設(shè)置有效路徑：path: '/'。

如果你想刪除一個(gè)定義了有效路徑的cookie，你需要在調(diào)用函數(shù)時(shí)包含這個(gè)路徑:$.cookie('the_cookie', null, { path: '/' });。

domain: 'example.com'

默認(rèn)值：創(chuàng)建cookie的網(wǎng)頁(yè)所擁有的域名。

secure: true

默認(rèn)值：false。如果為true，cookie的傳輸需要使用安全協(xié)議（HTTPS）。

raw: true

默認(rèn)值：false。默認(rèn)情況下，讀取和寫入cookie的時(shí)候自動(dòng)進(jìn)行編碼和解碼（使用encodeURIComponent編碼，decodeURIComponent解碼）。

要關(guān)閉這個(gè)功能設(shè)置raw: true即可。

$.cookie('the_cookie'); // get cookie $.cookie('the_cookie', 'the_value'); // set cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future $.cookie('the_cookie', '', { expires: -1 }); // delete cookie
$.cookie('the_cookie', null); // delete cookie

$.cookie('the_cookie','the_value', {expires: 7, path: '/', domain:'80tvb.com', secure: true});//完整調(diào)用方式

//或者這樣：$.cookie('the_cookie','the_value');

//刪除Cookie： $.cookie('the_cookie',null);

jQuery操作cookie的插件,大概的使用方法如下

$.cookie('the_cookie'); //讀取Cookie值
$.cookie('the_cookie', ‘the_value'); //設(shè)置cookie的值
$.cookie('the_cookie', ‘the_value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true});//新建一個(gè)cookie 包括有效期路徑域名等
$.cookie('the_cookie', ‘the_value'); //新建cookie
$.cookie('the_cookie', null); //刪除一個(gè)cookie

jquery設(shè)置cookie過(guò)期時(shí)間與檢查cookies是否可用

讓cookies在x分鐘后過(guò)期
var date = new date();
date.settime(date.gettime() + (x * 60 * 1000));
$.cookie(‘example', ‘foo', { expires: date });

$.cookie(‘example', ‘foo', { expires: 7});

檢查cookies是否可用
$(document).ready(function() {var dt = new date();dt.setseconds(dt.getseconds() + 60);document.cookie = “cookietest=1; expires=” + dt.togmtstring();var cookiesenabled = document.cookie.indexof(“cookietest=”) != -1;if(!cookiesenabled){//cookies不能用……..}});

上一篇：淺析Cookie中的Path與domain

下一篇：Event altKey,ctrlKey,shiftKey屬性解析