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

巴特西

Cookie实现商品浏览记录--方式二：JS实现

最新文章

热门文章