javascript - 一个关于设置cookie的问题？

Question

        /*设置cookie*/
        function setCookie(name,value,d){
                var date=new Date();
                date.setTime(date.getTime()+(d*24*60*60*1000));
                document.cookie=encodeURIComponent(name)+"="+encodeURIComponent(value)+";expires="+date.toGMTString();
            }

    /*获取cookie*/
    function getCookie(name){
        var list=document.cookie.split(";");
        for(var i=0;i<list.length;i++){
            var item=list[i].split("=");
            if(item[0]===name){
                return encodeURIComponent(item[1]);
            }
        }
    }

setCookie("loginSuc",1,2);
setCookie("followSuc",1,2);
console.log(getCookie("loginSuc"));
console.log(getCookie("followSuc"));

请问这段代码的函数有什么问题？setCookie这里，第二个设置的cookie总是会获取不到，比如说上面的getCookie("followSuc")就会获取不到，但是如果你把setCookie("loginSuc",1,2);和setCookie("followSuc",1,2);的先后顺序换一下，那么getCookie("loginSuc")就会获取不到了。但是在cookie里看到是有的，console一下document.cookie也是可以看得到是有的，到底是哪里出问题了？

即使设置更多的cookie，可以在浏览器里查看得到，但是除了第一个，其它的无法通过getCookie得到。是不是getCookie函数哪里有问题？

有朋友提到应该要把item[0]前后的空白字符去掉....去掉果然就可以了，那其实这些空白字符是怎么出现的？好像在处理中没有引入空白字符啊.....为什么啊.....

Answer 1

DEMO
试试这个吧，修改了一下，增加了trim()函数。楼主也可以自己debug一下代码。

---

之所以会有space这是cookie serialize的规范。
RFC6265

   4.  Serialize the cookie-list into a cookie-string by processing each
       cookie in the cookie-list in order:

       1.  Output the cookie's name, the %x3D ("=") character, and the
           cookie's value.

       2.  If there is an unprocessed cookie in the cookie-list, output
           the characters %x3B and %x20 ("; ").

楼主也可参考js.cookie的实现 js.cookie

var cookies = document.cookie ? document.cookie.split('; ') : [];

在js.cookie实现中是使用;%x20来做字符串分割的。

Answer 2

我在chrome控制台里试了一下，用你封装的cookie操作，首先设置两个cookie：
setCookie('team','cavs',1)
setCookie('number','2',1)

然后直接查看cookie：
document.cookie

得到结果：
"team=cavs; number=2; gr_user_id=7c79d963-80fd-4d52-9322-e1a069d4de68; sf_remember=23deedade8a2e419d7e3a8919abac392; _gat=1; _ga=GA1.2.606741972.1473731486; activate_count=28; Hm_lvt_e23800c454aa573c0ccb16b52665ac26=1476371124,1476371188,1476371193,1476414186; Hm_lpvt_e23800c454aa573c0ccb16b52665ac26=1476415614; gr_session_id_5411b7ab1ae040ed9a4eb4a120a06ead=9251ad5b-1511-4500-a52b-5787226b5ba2"

注意前两个我新设置的cookie，每一个键值对的后面都会有一个空格

看来是需要trim()一下

不过这里提供一个我封装的cookie，因为getCookie的检索方式不同，所以不会出现类似的问题：

var cookieUtil = {

    setCookie: function(name, value, expiresDays) {
        var date = new Date();
        date.setDate(date.getDate() + expiresDays);
        document.cookie = name + "=" + escape(value) + ";" + ((expiresDays == null) ? "" : ";expires=" + date.toGMTString());
    },

    getCookie: function(name) {
        var cookies = document.cookie;
        var start = cookies.indexOf(name + "=");

        if (start === -1) {
            return "";
        }

        start = start + name.length + 1;
        var end = cookies.indexOf(";", start);

        //是最后一个键值对（末尾没有分号）
        if (end === -1) {
            end = document.cookie.length;
        }

        return unescape(document.cookie.substring(start, end));

    },

    deleteCookie: function(name) {
        //将过期日期设置为前一天
        this.setCookie(name, "", -1);
    }
}