jquery.cookie用法詳細解析_jquery
- WBOY原創
- 2016-05-16 17:08:411361瀏覽
Cookie是由伺服器端生成，傳送給User-Agent（一般是瀏覽器），瀏覽器會將Cookie的key/value儲存到某個目錄下的文字檔案內，下次要求相同網站時就傳送該Cookie給伺服器（前提是瀏覽器設定為啟用cookie）。
例如購物網站儲存使用者曾經瀏覽過的產品列表，或入口網站記住使用者喜歡選擇瀏覽哪一類新聞。 在使用者允許的情況下，還可以儲存使用者的登入訊息，使得使用者在造訪網站時不必每次都鍵入這些資訊？
怎麼在js/jquery操作處理cookie那？今天分享一個cookie操作類別--jQuery.Cookie.js，是一個輕量級的Cookie管理外掛程式。
Cookie下載網址： http://plugins.jquery.com/project/cookie.
特別提醒，今日發現一個特別的錯誤，google瀏覽器提示：has no method $.cookie。火狐瀏覽器提示:$.cookie is not a function;調試了半天，終於找到原因，如果同一個頁面兩次或多次引入Jquery插件就會報此錯誤。
使用方法：
1、引入jQuery與jQuery.Cookie.js插件。
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)); //三天后的这个时候过期
//$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });
}else{
$.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie
}
});
函數。
語法：$.cookie(名稱,值,[option])
(1)讀取cookie值
$.cookie(cookieName) cookieName:要讀取的cookie名稱。
範例：$.cookie("username"); 讀取儲存在cookie中名為的username的值。
(2)寫入設定Cookie值：
$.cookie(cookieName,cookieValue); cookieName:要設定的cookie名稱，cookieValue表示對應的值。
範例:$.cookie("username","admin"); 將值"admin"寫入cookie名為username的cookie中。
$.cookie("username",NULL); 銷毀名稱為username的cookie
(3) [option]參數說明：
expires: 有限日期，可以是一個整數或一個日期(單位：天)。 這個地方也要注意，如果不設定這個東西，瀏覽器關閉之後此cookie就失效了
path: cookie值儲存的路徑，預設與建立頁路徑一致。
domin: cookie網域屬性，預設與建立頁網域名稱相同。 這個地方要相當注意，跨域的概念，如果要主域名二級域名有效則要設定 ".xxx.com"
secrue: 一個布林值，表示傳送cookie值時，是否需要一個安全協定。
範例：
$.cookie("like", $(":radio[checked]").val(), {
path: "/", expiress: 7
})
一個完整設定與讀取cookie的頁面代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习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='张学友']").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="张学友" />张学友
</p>
<p><input type="button" value="保存" /></p>
</body>
</html>
cookie本質上是一個txt文本，因此只能夠存入字串，物件通常要序列化之後才能存入cookie，而取的時候要反序列才又能得到物件。
$(function () {
if ($.cookie("o") == null) {
var o = { name: "张三", age: 24 };
var str = JSON.stringify(o); //对序列化成字符串然后存入cookie
$.cookie("o", str, {
expires:7 //设置时间，如果此处留空，则浏览器关闭此cookie就失效。
});
alert("cookie为空");
}
else {
var str1 = $.cookie("o");
var o1 = JSON.parse(str1); //字符反序列化成对象
alert(o1.name); //输反序列化出来的对象的姓名值
}
})
Cookie の読み取り、書き込み、削除ができる軽量の Cookie プラグイン。
jquery.cookie.js 設定
最初に jQuery ライブラリ ファイルをインクルードし、次に jquery.cookie.js ライブラリ ファイルをインクルードします
967ba072082ba7f55ea5396b9cdf91542cacc6d41bbb37262a98f745aa00fbf0
24072ae8460dd165378b4c66bd005edd2cacc6d41bbb37262a98f745aa00fbf0
使用方法
$.cookie('the_cookie', 'the_value');
$.cookie('the_cookie', 'the_value', { 有効期限: 7 });
Cookie を作成し、その Cookie への有効なパスを設定します:
注: デフォルトでは、Cookie を設定する Web ページのみが Cookie を読み取ることができます。別のページによって設定された Cookie をページで読み取れるようにする場合は、Cookie のパスを設定する必要があります。
Cookie パスは、Cookie を読み取ることができる最上位ディレクトリを設定するために使用されます。このパスを Web サイトのルート ディレクトリに設定すると、すべての Web ページが相互に Cookie を読み取れるようになります (通常、競合を防ぐためにこのパスは設定しないでください)
Cookie を読み取ります:
// クッキーは存在します => 'the_value' $.cookie('not_existing') // クッキーは存在しません => Cookie を削除するには、Cookie の値として null を渡します:
$.cookie('the_cookie', null);
関連パラメータの説明
有効期限: 365
Cookie の有効期間を定義します。値は 1 (Cookie の作成時からの日数) または日付です。
省略した場合、作成される Cookie はセッション Cookie となり、ユーザーがブラウザを終了すると削除されます。
パス: '/'
デフォルト: Cookie を設定する Web ページのみが Cookie を読み取ることができます。
Cookie の有効なパスを定義します。デフォルトでは、このパラメータの値は、Cookie が作成された Web ページへのパスです (ブラウザの標準動作)。
Web サイト全体でこの Cookie にアクセスしたい場合は、パス: '/' のように有効なパスを設定する必要があります。
有効なパスが定義されている Cookie を削除したい場合は、関数 $.cookie('the_cookie', null, { path: '/' }); を呼び出すときにこのパスを含める必要があります。
ドメイン: 'example.com'
デフォルト値: Cookie を作成した Web ページが所有するドメイン名。
安全: true
デフォルト値: false。 true の場合、Cookie の送信には安全なプロトコル (HTTPS) の使用が必要です。
未加工: true
デフォルト値: false。 デフォルトでは、Cookie の読み取りおよび書き込み時にエンコードとデコードが自動的に実行されます (エンコードには encodeURIComponent を使用し、デコードには decodeURIComponent を使用します)。
この機能をオフにするには、raw: true を設定するだけです。
$.cookie('the_cookie'); // クッキーを取得 $.cookie('the_cookie', 'the_value') // クッキーを設定 $.cookie('the_cookie', 'the_value', { 有効期限: 7 }); / クッキーの有効期限を 7 日後に設定します $.cookie('the_cookie', '', { 有効期限: -1 }) // クッキーを削除します
$.cookie('the_cookie', null) // クッキーを削除します
//またはこれ: $.cookie('the_cookie','the_value');
//Cookie の削除: $.cookie('the_cookie',null);
Cookieを操作するjQueryプラグイン、おおよその使用方法は以下の通りです $.cookie('the_cookie') //Cookie 値を読み取ります
$.cookie('the_cookie', 'the_value') //Cookie の値を設定します
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//有効期間、パスドメイン名を含む新しい Cookie を作成します、など
$.cookie('the_cookie', 'the_value') // 新しいクッキーを作成します
$.cookie('the_cookie', null) // クッキーを削除します
jquery は Cookie の有効期限を設定し、Cookie が利用可能かどうかを確認します
var date = new date();
date.settime(date.gettime() (x * 60 * 1000));
$.cookie('example', 'foo', { 有効期限: date });
$.cookie('example', 'foo', { 有効期限: 7});
Cookie が利用可能かどうかを確認してください
$(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){//Cookie は使用できません……..}});