JS設置cookie、讀取cookie、刪除cookie

session和cookie的區別：session運行在服務器端，cookie運行在客戶端

cookie的結構：cookie是以鍵值對的形式保存的，即key=value的格式，各個cookie之間一般是以“;”分隔。 

在控制台打印document.cookie可以看到如下結果：

JS設置cookie:

       要保存變量username的值("Amy")到cookie中,key值為name,js代碼：

　　 document.cookie = "name="+username; 

JS讀取cookie:

      假設cookie中存儲的內容為：name=Amy;sex=female;

      在頁面中獲取變量username的值的JS：

      var username = document.cookie.split(";")[0].split("0")[1];

在實際項目中操作cookie的方法：

      //setCookie

function setCookie(name, value) {
       var days = 1;
       var exp = new Date();
       exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
       document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

　　//getCookie

function getcookie(key) {
            var strCookie = document.cookie;
            var arrCookie = strCookie.split(";");
            for (var m = 0; m < arrCookie.length; m++) {
                var ac = $.trim(arrCookie[m]);
                if (ac.indexOf(key + '=') != -1) {
                    return ac.replace(key + '=', "");
                }
            }
}

   //checkCookie

function checkcookie(key) {
            var isok = false;
            var strCookie = document.cookie;
            var arrCookie = strCookie.split(";");
            for (var m = 0; m < arrCookie.length; m++) {
                var ac = $.trim(arrCookie[m]);
                if (ac.indexOf(key+ '=') != -1) {
                    isok = true;
                    break;
                }
            }
            return isok;
}

實例中使用cookie:

   

var news_id = $(this).attr("id");
var cookieId = "selfLD_3@" + date + "@" + news_id;//命名key
if (getcookie(cookieId)) {
           alert('今日此項您已投過，dddd請勿重復投票。感謝您的使用！');
            return;
} else {
             setCookie(cookieId, 1);
}

var zana = $(this);
$.ajax({
           type: "GET",
           async: true,//異步請求
           dataType: "jsonp",
           crossDomain: true,
           url: "../plusone3/LD_3/0/" + news_id,
           jsonp: 'jsoncallback',
            jsonpCallback: "success_jsonpCallback",
           success: function(data) {
                    console.log(data);
                    if (data.status == 1) {
                            zana.attr('class', 'zansel');
                            var origin =$("#"+news_id).text();
                            var intorigin = parseInt(origin);
                            if(isNaN(intorigin)){
                                intorigin = 0;
                            }
                            intorigin++;
                            $("#" + news_id).text(intorigin);
                            alert("感謝您的參與，謝謝！");
                     }else if(data.status == -1){
                            alert('今日您已投過此項，請勿重復投票。感謝您的使用！');
                    }
             }
 })

重復投票的情況下使用cookie來判斷，而無需再次請求后台接口。

 

http://www.w3school.com.cn/js/js_cookies.asp

js cookie:http://www.cnblogs.com/fishtreeyu/archive/2011/10/06/2200280.html

jquery.cookie:http://www.cnblogs.com/Denny_Yang/archive/2012/06/11/2544590.html