jquery 缓存Cookie插件 jquery.cookie.js 文件下载
jquery.cookie.js介绍
jquery.cookie.js的作用是用于记录和存储网页的缓存Cookie的文件，下载后，上传到自己的网站空间里，并且使用代码进行调用即可使用。
下面是jquery.cookie.js常用的方法：
写入Cookie：
$.cookie('cookieName', 'cookieValue');
写入带有选项的cookie（例如，设置一个有效期为7天的cookie）：
$.cookie('cookieName', 'cookieValue', { expires: 7 });
读取Cookie：
var value = $.cookie('cookieName');
删除Cookie：
$.cookie('cookieName', null);
实例1：使用COOKIE来做购物车
点击按钮，将一组数据写入cookie里：
<script>
var dataArray = $.cookie('pro_group') ? JSON.parse($.cookie('pro_group')) : [];//判断是否有cookie，没有就为空数组
jQuery( ".add-to-request button" ).click(function() {
jQuery(this).attr('disabled','disabled');//给点击按钮加disabled，让它二次点击无效
var dataGroup = {//将要写入cookie的多个数据放在一个对象里
p_bianhao:bianhao,
p_cpname:cpname,
p_status:status,
};
dataArray.unshift(dataGroup);//将对象数据写添加到数组里
$.cookie('pro_group', JSON.stringify(dataArray));//将数组转为json写入cookie里，pro_group为cookie名称；
}
});
</script>
读取和显示cookie；
<table class="search-table">
<tbody></tbody>
</table>
<script>
// 从cookie中读取数据
var dataJSON = $.cookie('pro_group');
// 将JSON字符串解析为数组
var dataArray = JSON.parse(dataJSON);
// 使用 $.each 遍历数据数组
$.each(dataArray, function(index, item) {
// 创建表格行并添加数据
var row = '<tr>' +
'<td class="bianhao">'+item.p_bianhao+'</td>' +
'<td class="cpname">'+item.p_cpname+'</td>' +
'<td class="status">'+item.p_status+'</td>' +
'<td class="more-info add-to-request" data-id = "'+index+'"><button>删除</button></td>'+
'</tr>';
// 将每一行添加到表格
$('.search-table tbody').append(row);
});
//删除每一条cookie
//如果是一次性清除cookie：$.removeCookie('pro_group');
jQuery( ".add-to-request button" ).click(function() {//删除每一条cookie
jQuery(this).attr('disabled','disabled');
jQuery(this).closest("tr").hide();//删除隐藏行
var s_id = jQuery(this).closest("td").attr('data-id');
dataArray2 = dataArray.splice(s_id, 1);//删除指定行
$.cookie('pro_group', JSON.stringify(dataArray));//重新赋给cookie
});
</script>
实例2：网站的换肤功能
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin a");
$li.click(function(){
switchSkin( this.id );
});
var cookie_skin = $.cookie( "MyCssSkin");
if (cookie_skin) {
switchSkin( cookie_skin );
}
});
function switchSkin(skinName){
$("#"+skinName).addClass("selected").siblings().removeClass("selected");
//当前<li>元素选中
//去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ skinName +".css");
//设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>
