記一次js操做cookie的坑！

    需求：在網站首頁加了一個廣告模態框，要求天天第一次訪問時彈出，此後當天再也不彈。

    網站上線的當天晚上，大BOSS臨時加的一個小需求，當時感受沒什麼困難的，幾分鐘的事情，模態框和cookie操做都是封裝好的工具方法，只要將廣告圖片加上，再存個彈出標識cookie，設置過時時間24小時就ok。然而，實際操做起來，效果卻不理想。

    咱們項目用的是angularjs 1.3的框架，說這個問題以前，不得不提我作登陸功能時，遇到的另外一個cookie問題。當時操做cookie用的是$cookieStore。可是他好像不兼容IE8，當時用他來作登陸功能時，發現頁面不能跳轉，一跳轉頁面cookie就會消失，在本頁面即便刷新也能讀取到cookie。

    首先百度查了又查，有的說是IE8設置問題，有的說是用法問題，有的說是兼容問題，反正我都試了，最終只能歸咎於兼容問題。同時能夠確定的，這應該是和cookie的做用域或是路徑有關係，可是我又無法查看IE8下面cookie的詳細信息，而$cookieStore又沒法手動設置做用域和路徑。這時，我想起之前用過用js封裝過cookie工具方法，肯定是能夠兼容IE8的。因而我就直接拿過來用了，最後測試IE8，果真問題沒了。此外我還多測了一下，利用js的方法，我不設置做用域，問題任然存在。

    再次回到本問題，這次我用的還是前面的用到的js方法，我信誓旦旦應該不存在什麼問題的，但恰恰問題又來了。此次的狀況是這樣的，在本頁面設置cookie後，跳轉頁面也能獲取到，可是一刷新cookie我獲取到的值就爲空字符串。當時簡直傻眼了，由於晚上還要上線，我前面還和經理保證過沒問題的，結果又遇到坑了，我那個急啊，由於我本來沒想當過會出問題的地方，竟然又出了一個無腦的問題，搞的我一臉萌幣。並且又急着上線，搞的我一點解決思路都沒得；可是無法只能硬着頭皮上了。

    首先仍是百度，百度上也有相似的問題，可是不多，並且都沒有確切的回答（估計是由於問題太SB）；終於，翻到了一個比較靠譜的回答，大概的意思是這樣的：cookie域名設置必需要是域名，IP地址無效。靠，我頓時恍然大悟（此時我徹底忘了之前的登陸功能就是用IP作的），因而又用host文件映射IP和域名，最後一測，果真有效，我簡直要笑了，不要這麼輕鬆好很差~

    因而，我興沖沖的跑去跟經理彙報了，經理一聽馬上就把網站發到了公測環境；而後經理一打開網站就看到了彈窗，而後刷新，彈窗又出來了，再而後就問我，這彈窗爲何還一直彈啊，我當時就猜到他會這麼問了，而後就把網上的答案給他了，我說，由於cookie設置須要用具體的域名，ip設置無效，放到線上就行了（此時仍未發現問題）~見鬼了，當天晚上由於測試請假先走了，這個問題最後到上線都沒人發現。

    終於，網站上線了，我又興沖沖打開線上的網站來驗證，一打開，廣告出來了，而後刷新，他 妹 的又出來了，我靠，當時個人臉頓時感到火辣辣的。可是沒辦法問題還在啊，我一邊忍着不哭一邊慌忙的再次找緣由，可是通過這麼一搞，我又一點思路都沒了。

    以後由於上線時已是晚上9點30了，經理就過來跟咱們說，網站上線了，大問題沒有，可是那個彈窗仍是老彈（當時真想鑽地縫），今晚不早了就先下班吧~~~而後同事們就迅速的關機走人了。當時我真不想走的，由於真的是太尷尬了，可是留下來又不知道要搞到何時，關鍵是公司又沒人了，好吧，先走吧，明天再說......因而，我也關機走人。

    到家了，之前都是很興奮的，搞很差還會先擼一把再睡，可是那天晚上終於沒心情了，念念不忘剛纔的問題，可是怎麼也想不通。因而，我又打開電腦、打開google、打開線上的網站，打開控制檯......而後讓本身平靜下，再次從頭開始排查，首先我發現cookie設置是成功的，從google上看到cookie的過時時間、做用域和路徑都沒問題，因而排除cookie自己的問題。其次，是使用的工具方法，用的是之前的老方法，所以問題應該不在方法上。

    最後，我發現，當我刷新頁面時，cookie也跟着刷新；這地方就很奇怪了，由於cookie的過時時間是24小時，怎麼可能一刷新頁面，cookie就像刷新同樣呢？幸虧在家裏人比較冷靜，稍微思考下就想到一種可能性，那就是在前面的js中，可能在某些地方對cookie作了清除，有了這個想法，我立刻進行了驗證，果真在驗證登陸狀態的方法中利用了清除cookie的操做，當初這麼作是爲了檢測到未登陸時，避免殘留cookie對後面產生影響，就偷懶用了清空全部cookie，這就致使不登陸時cookie永遠都會先清後存。

    總結：這是一個本身坑本身的故事，我想在實際開發中這類問題應該會常常遇到，只能更加細心一點，讓本身少點坑！

    附兼容IE的cookie操做方法：

var $tools= {
    //清楚全部cookie,或清除指定名稱的cookie
    clearAll: function (me){
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            if (!!me){
                if (me === $.trim(name)){
                    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                }
            }else{
                document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
            }
        }
        if(cookies.length > 0)
        {
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i];
                var eqPos = cookie.indexOf("=");
                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                var domain = location.host.substr(location.host.indexOf('.'));
                if (!!me){
                    if (me === $.trim(name)){
                        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;
                    }
                }else {
                    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;
                }
            }
        }
    },

    //保存cookie
    setCookie: function (name, value, hour, domain){
        if (!!domain && domain.indexOf('www.') != -1){
            domain= domain.substring(4);
        }
        var curCookie = name + "=" + encodeURIComponent(value) +";";
        if(0 != hour){
            var date = new Date();
            date.setTime(date.getTime() + hour * 3600 * 1000);
            var expires = date.toGMTString();
            curCookie += "expires=" + expires +";";
        }
        curCookie += "path=/";
        if(""!=domain){
            curCookie += ";domain="+domain;
        }
        document.cookie = curCookie;
    },

    //得到cookie
    getCookie: function (name){
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1){
            begin = dc.indexOf(prefix);
            if (begin != 0) return "";
        }else{
            begin += 2;
        }
        var end = document.cookie.indexOf(";", begin);
        if (end == -1){
            end = dc.length;
        }
        return unescape(dc.substring(begin + prefix.length, end));
    }
}