引用文件頭
<script src="http://blog.163.com/m13864039250_1/blog/../../JS/jquery-1.8.0.min.js"></script>
<script src="http://blog.163.com/m13864039250_1/blog/../../JS/jquery.cookie.js"></script>
1.簡單字符串，cookie操作
<script type="text/javascript">
//Jquery Cookie使用實例
$(function () {
var cookieOne = 'green';
$(":button:first").click(function () {
//$.cookie("cookieOne", cookieOne);//如果不指定過期時間，則當瀏覽器關閉的時候cookie清楚
$.cookie("cookieOne", cookieOne, {expires:7});//指定過期時間，單位爲天
$("#cookeOne").css("background-color","blue");
});
$(":button:eq(1)").click(function () {
var ul = $("<ul></ul>");
var li = $("<li></li>");
var result = $.cookie("cookieOne");//獲取結果，指定key對應的value
li.text("Value:" + result);
ul.append(li).appendTo($("#cookieOne"));
$("#cookieOne").css("background-color", $.cookie("cookieOne"));
});
});
</script>
<input type="button" value="存入cookie"/>
<input type="button" value="檢索cookie"/>
<div id="cookieOne"></div>
2.數組操作：
<script type="text/javascript">
$(function () {
var data = ["abc", "123", "zhangsan"];
//存入，默認支持輸出存儲
$(":button:first").click(function () {
$.cookie("cookieTwo", data, { expires: 365 });
});
//檢索cookie，檢索數組結果是數組的字符串形式，逗號分隔
$(":button:eq(1)").click(function () {
var result = $.cookie("cookieTwo");
$("#cookieOne").text(result);
});
//刪除
$(":button:last").click(function () {
$.removeCookie("cookieTwo");
alert("刪除成功");
});
});
</script>
<input type="button" value="存入cookie"/>
<input type="button" value="檢索cookie"/>
<input type="button" value="刪除cookie"/>
<div id="cookieOne"></div>
1.輸出存入狀態：
2.數組檢索出，狀態
3.刪除cookie，原理是將cookie的時間設置爲過期
3.簡單json對象操作
<script type="text/javascript">
$(function () {
var completeData = {
data: '張三',
inputDate: new Date().toLocaleString(),
inputCount: 5
};
$.cookie.json = true;//此屬性可以設置，cookie類支持json對象存儲（作用於存入和讀取）
//存入
$(":button:first").click(function () {
$.cookie("objectOne", completeData, {expires:365});
});
//檢索
$(":button:last").click(function () {
var result = $.cookie("objectOne");
$("#cookieList").text(result.data);
});
});
</script>
<div id="cookieList"></div>
<input type="button" value="存入cookie"/>
<input type="button" value="檢索cookie" />
1.存入結果： 2.顯示結果：
4.Cookie的跨頁面操作
默認存入cookie的時候如果沒有制定path則存入的值爲當前頁面的文件夾，也就是說在同一個文件夾中的頁面可以獲取同一個key對應的cookie的值。
<script type="text/javascript">
$(function () {
//跨頁面獲取cookie
var shareData = [
{ num: 1, name: 'zhangsan' },
{ num: 2, name: '李四' },
{ num: 2, name: '小明' }
];
$.cookie.json = true;
//存入
$(":button:first").click(function () {
$.cookie("share", shareData, { expires: 365, path: '/' });
alert("存入成功");
});
//檢索
$(":button:last").click(function () {
var result = $.cookie("share");
$("#cookieList").html("num:" + result[0].num + " ,name: " + result[0].name);
$("#cookieList").append("<br>");
$("#cookieList").append("num:" + result[1].num + " ,name: " + result[1].name);
$("#cookieList").append("<br>");
$("#cookieList").append("num:" + result[2].num + " ,name: " + result[2].name);
});
//刪除cookie
$(":button:eq(1)").click(function () {
$.removeCookie("share", {path:'/'});
alert("刪除cookie");
});
});
</script>
1.存入結果：
a.顯示指定path屬性可以實現cookie的跨頁面訪問
b.檢索cookie 的時候不可以指定路徑
c.如果顯示指定path屬性，存入的cookie鍵值對，需要指定同樣的參數刪除
6.cookie 插件的path問題：
a.檢索cookie 的時候不可以指定路徑
b.cookie的路徑爲cookie存儲的邏輯目錄，相對路徑目錄
c.同一個domain中的cookieID就是鍵值不能相同，如果相同獲取值時會出現錯誤，總是獲取目錄級最外層的值。
更多：