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