jquery.cookie.js的插件，插件的源代碼如下：

/*** Cookie plugin** Copyright (c) 2006 Klaus Hartl (stilbuero.de)* Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html**//*** Create a cookie with the given name and value and other optional parameters.** @example $.cookie('the_cookie', 'the_value');* @desc Set the value of a cookie.* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });* @desc Create a cookie with all available options.* @example $.cookie('the_cookie', 'the_value');* @desc Create a session cookie.* @example $.cookie('the_cookie', null);* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain* used when the cookie was set.** @param String name The name of the cookie.* @param String value The value of the cookie.* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.* If set to null or omitted, the cookie will be a session cookie and will not be retained* when the the browser exits.* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will* require a secure protocol (like HTTPS).* @type undefined** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*//*** Get the value of a cookie with the given name.** @example $.cookie('the_cookie');* @desc Get the value of a cookie.** @param String name The name of the cookie.* @return The value of the cookie.* @type String** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*/jQuery.cookie = function(name, value, options) {if (typeof value != 'undefined') { // name and value given, set cookieoptions = options || {};if (value === null) {value = '';options.expires = -1;}var expires = '';if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {var date;if (typeof options.expires == 'number') {date = new Date();date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));} else {date = options.expires;}expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE }// CAUTION: Needed to parenthesize options.path and options.domain// in the following expressions, otherwise they evaluate to undefined// in the packed version for some reason...var path = options.path ? '; path=' + (options.path) : '';var domain = options.domain ? '; domain=' + (options.domain) : '';var secure = options.secure ? '; secure' : '';document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');} else { // only name given, get cookievar cookieValue = null;if (document.cookie && document.cookie != '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) == (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;} };

Cookie插件的操作

創(chuàng)建一個會話cookie：

$.cookie(‘cookieName’,'cookieValue’);

注：當(dāng)沒有指明cookie時間時，所創(chuàng)建的cookie有效期默認到用戶瀏覽器關(guān)閉止，故被稱為會話cookie。

創(chuàng)建一個持久cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);

注：當(dāng)指明時間時，故稱為持久cookie，并且有效時間為天。

創(chuàng)建一個持久并帶有效路徑的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);

注：如果不設(shè)置有效路徑，在默認情況下，只能在cookie設(shè)置當(dāng)前頁面讀取該cookie，cookie的路徑用于設(shè)置能夠讀取cookie的頂級目錄。

創(chuàng)建一個持久并帶有效路徑和域名的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'，domain: ‘chuhoo.com’，secure: false，raw:false｝);

注：domain：創(chuàng)建cookie所在網(wǎng)頁所擁有的域名；secure：默認是false，如果為true，cookie的傳輸協(xié)議需為https；raw：默認為false，讀取和寫入時候自動進行編碼和解碼（使用encodeURIComponent編碼，使用decodeURIComponent解碼），關(guān)閉這個功能，請設(shè)置為true。

獲取cookie：

$.cookie(‘cookieName’);?? //如果存在則返回cookieValue，否則返回null。

刪除cookie：

$.cookie(‘cookieName’,null);

或者這樣也能刪除：?$.cookie('cookieName',?'',?{?expires:?-1,?path:?'/'?});?//?刪除?cookie?

注：如果想刪除一個帶有效路徑的cookie，如下：$.cookie(‘cookieName’,null,{path:’/'});

來演示一個換膚的粟子：

代碼之div+css

<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />

<!--頭部開始--> <div id="header"><a id="logo" href="#">Jane Shopping</a><ul id="skin"><li id="skin_0" title="藍色" class="selected">藍色</li><li id="skin_1" title="紫色">紫色</li><li id="skin_2" title="紅色">紅色</li><li id="skin_3" title="天藍色">天藍色</li><li id="skin_4" title="橙色">橙色</li><li id="skin_5" title="淡綠色">淡綠色</li></ul></div> <!--頭部結(jié)束--> /*切換皮膚樣式*/ #skin { float:right; margin:10px; padding:4px; width:120px; list-style:none; border: 1px solid #CCCCCC; background:#FFF; } #skin li { float:left; margin-right:4px; width:15px; height:15px; text-indent:-9999px; overflow:hidden; display:block; cursor:pointer; background-image:url(../images/theme.gif); } #skin_0 { background-position:0px 0px; } #skin_1 { background-position:15px 0px; } #skin_2 { background-position:35px 0px; } #skin_3 { background-position:55px 0px; } #skin_4 { background-position:75px 0px; } #skin_5 { background-position:95px 0px; } #skin_0.selected { background-position:0px 15px; } #skin_1.selected { background-position:15px 15px; } #skin_2.selected { background-position:35px 15px; } #skin_3.selected { background-position:55px 15px; } #skin_4.selected { background-position:75px 15px; } #skin_5.selected { background-position:95px 15px; }

不同皮膚的css文件都放在styles/skins 文件夾下，命名如下：

代碼之jQuery代碼

版本一：

$(function(){var $li =$("#skin li");$li.click(function(){$("#"+this.id).addClass("selected") //當(dāng)前<li>元素選中.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中$("#cssfile").attr("href","styles/skin/"+ (this.id) +".css"); //設(shè)置不同皮膚$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });});var cookie_skin = $.cookie( "MyCssSkin");//將MyCssSkin這個cookie值this.id賦給變量cookie_skinif (cookie_skin) {$("#"+cookie_skin).addClass("selected") //當(dāng)前<li>元素選中.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中$("#cssfile").attr("href","styles/skin/"+ cookie_skin +".css"); //設(shè)置不同皮膚$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });}})

版本一不好的地方，就是有大量的重復(fù)代碼，可以模塊化，函數(shù)化，來看版本二：

//網(wǎng)站換膚 $(function(){var $li =$("#skin li");$li.click(function(){switchSkin( this.id );});var cookie_skin = $.cookie("MyCssSkin");if (cookie_skin) {switchSkin( cookie_skin );} });function switchSkin(skinName){$("#"+skinName).addClass("selected") //當(dāng)前<li>元素選中.siblings().removeClass("selected"); //去掉其他同輩<li>元素的選中$("#cssfile").attr("href","styles/skin/"+ skinName +".css"); //設(shè)置不同皮膚$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); }

下面代碼也是換膚的例子

html:

<script>//加載皮膚文件loadCss(_skinId,'Main.css'); </script><div style="right:10px; top: 5px; position: absolute; height: 21px; text-align:right"><a>皮膚：</a><a href="#" οnclick="loadSkin('1')">藤蔓綠</a>&nbsp;<a href="#" οnclick="loadSkin('2')">經(jīng)典藍</a>&nbsp;<a href="#" οnclick="loadSkin('3')">甜蜜橙</a>&nbsp;<a href="#" οnclick="loadSkin('4')">淡雅灰</a></div>

皮膚路徑 ：

js代碼：

var _skinId = getCookie("_skinId") ? getCookie("_skinId"):"1";function loadSkin(skinId) {writeCookie("_skinId",skinId);top.window.location.reload(); }function $(id) {return document.getElementById(id); }function loadCss(skinId,cssName) {var head = document.getElementsByTagName('head').item(0);css = document.createElement('link');css.href = "Skin/Skin" + skinId + "/"+cssName;css.rel = 'stylesheet';css.type = 'text/css';css.id = 'loadCss';head.appendChild(css); }function loadJs(file) {var scriptTag = document.getElementById('loadScript');var head = document.getElementsByTagName('head').item(0);if(scriptTag) head.removeChild(scriptTag);script = document.createElement('script');script.src = "../js/mi_"+file+".js";script.type = 'text/javascript';script.id = 'loadScript';head.appendChild(script); }function setCookie(sKey, sValue, sDomain, sPath, sExpires, blSecure) {var sCookieStr = sKey + "=" + sValue + ";";if (sDomain) sCookieStr += " DOMAIN=" + sDomain + ";";if (sPath) sCookieStr += " PATH=" + sPath + ";";if (sExpires) sCookieStr += " EXPIRES=" + sExpires + ";";if (blSecure) sCookieStr += " SECURE";document.cookie = sCookieStr; }function writeCookie(key,value) {var sExpires=new Date();sExpires.setTime(sExpires.getTime()+24*60*60*1000*365);setCookie(key,value,"","",sExpires.toGMTString(),""); if(getCookie(key) == null){alert("您的瀏覽器安全設(shè)置過高,不支持Cookie,請重新設(shè)置瀏覽器的。");} }function getCookie(sKey) {var sCookie = document.cookie;if( !sCookie ) return null;var sTag = sKey + "=";var iBegin = sCookie.indexOf(sTag);if (iBegin < 0) return null;iBegin += sTag.length;var iEnd = sCookie.indexOf(";", iBegin);if (iEnd < 0) iEnd = sCookie.length;return sCookie.substring(iBegin, iEnd); }function delCookie(sKey) {var tNow = new Date();setCookie(sKey, "", null, null, tNow.toGMTString(), null); }

?

轉(zhuǎn)載于:https://www.cnblogs.com/shy1766IT/p/5189604.html

總結(jié)

以上是生活随笔為你收集整理的jquery.cookie中的操作之与换肤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。