JS获取Cookie失败

项目开发日记-bug多多篇（1）

　　在做评论功能的时候遇到了一个很无厘头的错误，我的思路是参照点赞功能，用Ajax技术异步完成评论信息的传输，然后展示在页面上。

　　那么在提交评论信息的同时，要连着用户名，文章编号等信息一起提交。那很显然这些用户信息应该用cookie保存（也有别的方式，session什么的，我选择用cookie）那么用户的状态信息应该要在登录的时候就记录到cookie里，为此我写了一个CookieUtil，方便后面对cookie进行get set操作。

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;

public class CookieUtil {

    /**
     *保存cookie
     * @param response
     * @param key
     * @param value
     * @param time
     * @return
     */
    public static HttpServletResponse setCookie(
            HttpServletResponse response,String key,String value,int time){
        //new 一个Cookie对象，键值对是参数
        Cookie cookie = new Cookie(key,value);
        //以"/"开头的url都能访问cookie
        cookie.setPath("/");

        //对cookie编码进行设置
        try{
            URLEncoder.encode(value,"utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        //设置cookie生命周期
        cookie.setMaxAge(time);
        //将cookie添加到Response中，cookie没有更新，只能覆盖
        response.addCookie(cookie);
        return response;
    }

    /**
     * 将cookie封装到Map中
     * @param request
     * @return
     */
    private static Map<String,Cookie> ReadCookieMap(HttpServletRequest request){
        Map<String,Cookie> cookieMap = new HashMap<String,Cookie>();
        Cookie[] cookies = request.getCookies();
        if (null != cookies){
            for (Cookie cookie:cookies){
                cookieMap.put(cookie.getName(),cookie);
            }
        }
        return cookieMap;
    }

    /**
     * 根据名字获取Cookie
     * @param request
     * @param name
     * @return
     */
    public static Cookie getCookieByName(HttpServletRequest request,String name){
        Map<String,Cookie> cookieMap = ReadCookieMap(request);
        if (cookieMap.containsKey(name)){
            Cookie cookie = (Cookie) cookieMap.get(name);
            return cookie;
        }else {
            return null;
        }
    }

    /**
     * 删除无效cookie
     * @param response
     * @param request
     * @param deleteKey
     */
    private void delectCookieByName(
            HttpServletResponse response,HttpServletRequest request,String deleteKey){
        Map<String,Cookie> cookieMap = ReadCookieMap(request);
        for (String key:cookieMap.keySet()){
            if (key==deleteKey && key.equals(deleteKey)){
                Cookie cookie = cookieMap.get(key);
                cookie.setMaxAge(0);
                cookie.setPath("/");
                response.addCookie(cookie);
            }
        }
    }
}

CookieUtil

　　那么在对应需要提取cookie的页面我也写了一个getCookie()方法

 1 function getCookie(name) {
 2             var arr = document.cookie.split(";");
 3             console.log(arr);
 4             for (var i=0; i<arr.length; i++){
 5                 var arr2 = arr[i].split("=");
 6                 console.log(arr2);
 7                 if (arr2[0] === name){
 8                     console.log(arr2[0]);
 9                     return arr2[1];
10                 }
11             }
12             return null;
13         }

getCookie

　　那么事实上我的cookie内包含了一下内容

　　

　　可以看到有三个cookie，名称分别为debateId、username、teamId；那么正常情况下我只需要使用getCookie("username")这样的方式就能调用方法获取到对应的cookie值，但是实际上拿到的值是null，根据getCookie的方法体可以想到是在整个Cookie里都没有找到key=username的cookie。这不是放屁吗？怎么可能没有。

　　

　　打断点后可以看到，确实是遍历了所有cookie，没找到username然后就赋值了null。怪事

　　中间的过程就不说了，没有技术含量，搞了一小时，忽然眼尖发现：

　　

　　这怎么有个空格啊？？？不是我忙了半天就是因为一个空格吧？然后把getCookie("username")加一个空格成getCookie(" username")就行了。

　　多少有点走近科学的味了

　　晚点探究一下这个空格是哪来的，目前重点怀疑对象j就是split方法和setCookie方法。现在是！干饭时间！‍♂️

---

　　

　　干完饭了，探究一下。其实吃饭的时候我想了一下，应该不是split方法的问题，不然在我的getCookie方法里用了两次split那应该在cookie里有很多的空格，打断点看看到底是什么地方来的空格。

　　

　　再进add方法里看看

　　

　　刚刚隔壁的同学路过跟我一起看了一下，教了我ctrl+alt+点击方法名可以看到这个方法的接口什么的。

　　都断一断

　　

　　debug跑一下看看

　　

`　　传参没问题，下一步，response的addCookie方法，重点怀疑对象

　　

　　其实插入的Cookie本身是没有空格的

　　然后我看了一下别人的网站，比如博客园

　　打开网站后F12打开控制台，刷新页面到Network找一个带有cookie的接口

　　

　　也有空格！猜测就是addCookie的底层方法里有这个;后面加一个空格的规则，或者是response的格式是这样的？留一个疑问，有大佬可以帮忙解答一下嘛？