操作cookie外掛jquery.cookie用法
jquery.cookie是非常好的一款操作cookie的外掛,下面就介紹一下它的用法。
首先要引入jquery庫檔案和此外掛檔案,程式碼如下:
[HTML] 純文字檢視 複製程式碼<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
相關方法使用:
建立cookie:
[JavaScript] 純文字檢視 複製程式碼$.cookie('the_cookie', 'the_value');
the_cookie是名字,the_value是要存的資料
設定過期時間:
[JavaScript] 純文字檢視 複製程式碼$.cookie('the_cookie', 'the_value', { expires: 7 });
expires: 7設定有效期是7天
設定路徑:
[JavaScript] 純文字檢視 複製程式碼$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在預設情況下,只有設定cookie的網頁才能讀取該cookie。如果想讓一個頁面讀取另一個頁面設定的cookie,必須設定cookie的路徑。 cookie的路徑用於設定能夠讀取cookie的頂級目錄。將這個路徑設定為網站的根目錄,可以讓所有網頁都能互相讀取cookie(一般不要這樣設 置,防止出現衝突).
讀取cookie:
[JavaScript] 純文字檢視 複製程式碼$.cookie("MyCssSkin")
判斷cookie是否為空:
[JavaScript] 純文字檢視 複製程式碼if(cookie_skin){}
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0; } fieldset, img { border: none; } img { display: block; } ul, ol { list-style: none; } input { padding-top: 0; padding-bottom: 0; font-family: "SimSun","宋體"; } select, input, textarea { font-size: 12px; margin: 0; } textarea { resize: none; } table { border-collapse: collapse; } body { font-size: 12px; color: #333; } .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { zoom: 1; } a { color: #333; text-decoration: none; } a:hover { color: #666; text-decoration: none; } ul li { float: left; margin-right: 10px; width: 20px; height: 20px; } ul li:nth-of-type(1) { background: #000; } ul li:nth-of-type(2) { background: #ccc; } ul li:nth-of-type(3) { background: #fcf; } div { width: 100%; height: 500px; } </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script> <link rel="stylesheet" href="css/1.css" id="skin" /> <script> $(function(){ $('#skin_li li').click(function(){ var index = $(this).index()+1; $('#skin').attr({'href':'css/'+index+'.css'}) $.cookie('MyCssSkin',index,{expires:7,path:'/'}); }) var cookie_skin=$.cookie("MyCssSkin"); if(cookie_skin){ $("#skin").attr({"href":"css/"+cookie_skin+".css"}); $.cookie("MyCssSkin",cookie_skin,{path:'/', expires:7 }); } }) </script> </head> <body> <ul class="clearfix" id="skin_li"> <li></li> <li></li> <li></li> </ul> <div class="d"></div> </body> </html>
上面是一個換膚的程式碼例項,當然它無法演示效果,因為沒有對應的css檔案。
但是程式碼是正確的,能夠實現換膚後,重新整理頁面仍然保持皮膚的功能,這就是cookie所起到的作用。
相關文章
- 手寫jquery.cookie外掛jQueryCookie
- jquery.cookie外掛使用簡單介紹jQueryCookie
- javascript操作cookie簡單外掛JavaScriptCookie
- jquery操作cookie外掛程式碼分享jQueryCookie
- jQuery實現的cookie操作外掛jQueryCookie
- cookie外掛-jquery.cookie.js介紹CookiejQueryJS
- jQuery中cookie外掛如何使用jQueryCookie
- APISIX proxy-cache 外掛用法API
- Dart 集合操作外掛 DartXDart
- document.cookie 用法Cookie
- document.cookie用法Cookie
- 操作cookieCookie
- zTree外掛常鍵用法簡單介紹
- Java操作Cookie之新增CookieJavaCookie
- js cookie操作JSCookie
- js操作cookieJSCookie
- IntelliJ IDEA中用Git外掛操作IntelliJIdeaGit
- jquery.lazyload.js外掛用法簡單介紹jQueryJS
- Flask(11)- 操作 CookieFlaskCookie
- Vimium外掛讓鍵盤黨像操作Vim一樣操作ChromeChrome
- smartload跨瀏覽器極速快取外掛用法瀏覽器快取
- 滴滴外掛化方案 VirtualApk 完全解析(一) 初識基本用法APK
- cluetip關鍵詞連結外掛用法簡單介紹
- 20151224jquery學習筆記---cookie外掛jQuery筆記Cookie
- [外掛擴充套件]書架外掛(新外掛後臺)套件
- 外掛 檔案上傳外掛 ajaxfileupload.js外掛JS
- Cookie的相關操作Cookie
- Django(33)Django操作cookieDjangoCookie
- laravel操作session和cookieLaravelSessionCookie
- java對cookie的操作JavaCookie
- JavaScript操作cookie與localStorageJavaScriptCookie
- 【Javascript】——簡單cookie操作JavaScriptCookie
- 在JavaScript中操作CookieJavaScriptCookie
- JS 操作Cookie詳解JSCookie
- Cookie介紹及JavaScript操作Cookie方法詳解CookieJavaScript
- 外掛
- [外掛擴充套件]更新IP外掛套件
- [外掛擴充套件]廣告外掛2.0套件