今天想到了要為自己的影像日記增加贊的功能,並且需要用到cookie。
記得原生的js操作cookie也不是很麻煩的,但似乎jquery更簡單,不過相比原生js,需要額外引入2個文件,似乎又不是很好,但既然你的項目是基於jquery的,那用jquery.cookie還是不錯的。
jquery.cookie的項目地址:jquery-cookie
readme.md中也介紹了用法。簡單介紹一下后,下面我們結合實例來用:
增:$.cookie(‘isZan’, ‘1’, { expires: 1, path:’/’});
數字1表示設置有效期為1天,path:’/’表示當前域名的根目錄,例如www.baidu.com,這樣設置以后cookie值就可以通用。
刪:\$.cookie(‘isZan’, null);或者 \$.removeCookie(‘isZan’);
其它相關參數:
secure: true
默認值:false。如果為true,cookie的傳輸需要使用安全協議(HTTPS)。
raw: true
默認值:false。
默認情況下,讀取和寫入 cookie 的時候自動進行編碼和解碼(使用encodeURIComponent 編碼,
decodeURIComponent 解碼)。要關閉這個功能設置 raw: true 即可。
詳細請參考官方,還有這篇:jquery.cookie 使用方法
【實例】我想點擊設置cookie,點擊刪除則刪除該cookie。頁面圖:
那么我們的html代碼是:
<body> <a href="#" class="zan">點贊</a> <a href="#" class="del">刪除cookie</a> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="jquery.cookie.js"></script> </body>
js代碼
$(function(){ $('.zan').click(function(){ //先判斷cookie是否等於我們設置的 // 如果不等於,就發送加1的請求 if($.cookie('isZan') == undefined){ $.post('add.php',{id:"1"}, function(data){ if(data == "ok"){ //如果數據庫寫入加1成功則,添加cookie緩存 $.cookie('isZan', '1', { expires: 1 }); } }); } // 如果存在則不加1,彈出提示 else{ alert("今天已經贊過一次了,感謝你!"); } }); //刪除cookie $('.del').click(function(){ if($.cookie('isZan') != undefined){ // $.cookie('isZan', null); $.removeCookie('isZan'); alert("你的cookie值已成功刪除!"); } }); });
當點擊以后,查看cookie
點擊刪除,
但如果你是用的
$.cookie('isZan', null);
那么它的值被設置為了null