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

  • 相关阅读:
    JavaScript 正则表达式
    android源代码提示文本框还能输入多少个字符
    js实现鼠标点击input框后里面的内容就消失代码
    使用prompt输入一句英文句子和排序方式(升/降),将所有单词按排序方式排序后在网页上输出
    Javascript输出表格
    flutter 按键监听
    3.声明
    2.基础类型
    1.安装TypeScrpit
    苹果app证书
  • 原文地址:https://www.cnblogs.com/qusongsong/p/5992143.html
Copyright © 2020-2023  润新知