版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011127019/article/details/89205636
引用文件头
<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就是键值不能相同，如果相同获取值时会出现错误，总是获取目录级最外层的值。
更多：