Cookie實現商品瀏覽記錄--方式二：JS實現

使用Cookie實現商品瀏覽記錄：
方式二：JS方法實現cookie的獲取以及寫入。
當某一個產品被點擊時，觸發JS方法。利用JS方法判斷一下，此產品是否在瀏覽記錄中。若是不存在，則將產品ID加入到cookie中。不然將此id以前的id所有後移一位，而後將此id移動至第一位。
注意的問題是：經過js方法寫入cookie,在java代碼中獲取cookie的值，須要進行轉碼
java.net.URLDecoder.decode(listView,"UTF-8")；

具體實現以下：
(1). JSP頁面：當瀏覽某一個產品時，調用goView(id)方法，並將產品id做爲參數傳入。
```
<dt><a href="javascript:goView(${product.ep_id});">.....</a></dt>
```
(2). 在JS文件中，建立goView()方法。該方法的功能是，根據id寫入cookie，並將頁面跳轉到Servlet中。
```
function goView(id) {
    var aid = id;
    var newCookie = "";
        //得到key值爲viewRecode的cookie的value值
    var oldCookie = getCookie("viewRecode");
        //若是oldCookie不爲null
    if (oldCookie) {
                //將value值按照","分割成數組
        var array = oldCookie.split(",");
                //若是產品id在此數組中，則判斷此id是否處於數組中第一個位置。若是不在第一個位置，則讓此產品位置以前的id所有後移一位，而後將此id至於第一個位置。不然數組不變。
        if (inArray(array, id)) {
            for ( var a = 0; a < array.length; a++) {
                if (array[a] == id) {
                    if (a != 0) {
                        array[a] = null;
                        for ( var j = a; j >= 0; j--) {
                            array[j] = array[j - 1];
                            array[j - 1] = null;
                        }
                        array[0] = id;
                    }
                }
            }
                        //將上述的數組按","拼接成字符串
            newCookie = array.join(",");
        }
        //若是id不在此數組中,則將此id放在原字符串的最前面,並用","分割。
            else {
            newCookie = id + "," + oldCookie;
        }
    }
    //若是cookie中不存在此key值,則是第一次訪問產品,key值爲 viewRecode的cookie不存在,則先設定value值爲此id。
    else {
        newCookie = id;
    }
        //最後,將cookie寫入進去.
    setCookie("viewRecode", newCookie);
        //頁面跳轉到servlet中.
    location.href = "servlet/ProductServlet?param=productView&pid="+id;
}


//根據Cookie的key值獲得對應的value.若是不存在，則返回null.
function getCookie(name)
{
  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(arr != null) return unescape(arr[2]); return null;
}


//若是str在array數組中,返回true;不然返回false
function inArray(array, str) {
    for(var a in array){
        if(array[a] == str){
            return true;
        }
    }
    return false;
}

//寫入cookie
function setCookie(name,value)
{
  var Days = 30;
  var exp  = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  //在最後追加  ;path=/ 很是有必要。不然容易出現   在不一樣的目錄下，調用同一個js方法來存儲Cookie，到別的目錄取不出或取出的值是不對的這種狀況
  document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString()+";path=/";
}
```
(3). 在Servlet中經過獲取Cookie中的值，獲得商品列表，並顯示到jsp頁面中。
```
public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String param=request.getParameter("param");
        CookieService cookieService = new CookieSerivceImpl();
        Cookie[] cookies = request.getCookies();
        if("listView".equals(param)){
            String pid = request.getParameter("pid");
            List<Product> products = new ArrayList<Product>();
            //獲取cookie，讀取緩存
            String listView = "";
            if (cookies != null && cookies.length > 0) {
                for (Cookie c : cookies) {
                    if ("listView".equals(c.getName())) {
                        System.out.println(c.toString());
                        listView = c.getValue();
                        break;
                    }
                }
            }
            //這一步很是重要。由於Java接收JS傳遞值，須要解碼。不然","會被解析成 "%2C"
            //解碼以後的字符串就是正常的。
            String listView=java.net.URLDecoder.decode(listView,"UTF-8");
            //根據產品id列表得到產品列表
            products = cookieService.onLineProductList(listView);
            request.getSession().setAttribute("products", products);
            request.getRequestDispatcher("/servlet/ProductServlet?param=productView&pid="+pid).forward(request, response);
            out.flush();
            out.close();
    }
}
```
最後在頁面中經過EL表達式循環顯示出列表便可。
針對以上內容，歡迎指正！
謝謝你來看我！