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表达式循环显示出列表即可。
针对以上内容，欢迎指正！
谢谢你来看我！