Cookie案例：显示商品浏览记录

Thinking in Coder

于 2020-01-25 16:00:30 发布

阅读量777

点赞数

分类专栏： # JavaWeb 文章标签： cookie

本文链接：https://blog.csdn.net/qq_45615417/article/details/104081887

版权

JavaWeb 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

设计一个简单的商品列表页面（product_list.jsp），提供几件商品，当点击某商品时，跳转到（ProductServlet）执行相关逻辑，再重定向跳转到商品信息页面（ProductInfo.html），点击商品信息页面的返回按钮，跳转回商品列表页面（product_list.jsp），显示刚才浏览的商品。扩展：点击商品列表页面的清除浏览记录可删除浏览记录。

代完善：显示的浏览记录是商品id，如何与商品关联。
(1.一般是通过id在数据库中查询对应商品的信息，再展示到页面)
(2.这个案例中可以用一个数组，把商品名称放进数组，与id对应)
在这里插入图片描述

商品列表页面（product_list.jsp）

<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品列表</title>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--需要引入JQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<a href="ProductServlet?id=1" >苹果iPhone11</a>
					<p><font color="#FF0000">价格：&yen;6799</font></p>
				</div>
				<div class="col-md-6">
					<a href="ProductServlet?id=2">华为Mate30 Pro</a>
					<p><font color="#FF0000">价格：&yen;5799</font></p>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6">
					<a href="ProductServlet?id=3">OPPO Find X</a>
					<p><font color="#FF0000">价格：&yen;4999</font></p>
				</div>
				<div class="col-md-6">
					<a href="ProductServlet?id=4">vivo NEX 3</a>
					<p><font color="#FF0000">价格：&yen;4998</font></p>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6">
					<a href="ProductServlet?id=5">一加7T迈凯伦 </a>
					<p><font color="#FF0000">商城价：&yen;5299</font></p>
				</div>
				<div class="col-md-6">
					<a href="ProductServlet?id=6">小米MIX Alpha</a>
					<p><font color="#FF0000">商城价：&yen;19999</font></p>
				</div>
			</div>
		</div>
		
		
	<div class="container">
		<div class="row">
			<h3>浏览记录：</h3>
		<%
		Cookie[] cookies=request.getCookies();
		if(cookies != null){
			for (Cookie cookie : cookies) {
				if("bshistory".equals(cookie.getName())){
					String[] ids=cookie.getValue().split("#");
					for(String i : ids){
						%>
						   <%=i%> <br>
						<%
					}
				}
			}
		}else{
			%>
			 <h4>无浏览记录</h4>
			<% 
		}
		%>
		</div>
	</div>
	
	<div class="container">
		<div class="row">
			<a href="ClearBRServlet" ><h5>清除浏览记录</h5></a>
		</div>
	</div>
</body>
</html>

点击某商品时执行到该Servlet（ProductServlet.java）

public class ProductServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求中的参数
		String id = request.getParameter("id");
		Cookie[] cookies = request.getCookies();
		Cookie findCookie =findCookie(cookies,"bshistory");
		
		if(findCookie==null){//第一次浏览
			Cookie cookie = new Cookie("bshistory",id);
			response.addCookie(cookie);
		}else{//第二次浏览及以后浏览
			//得到之前保存在Cookie的商品id信息
			String lastId = findCookie.getValue();
			//将现在点击商品id的和之前的拼接
			findCookie.setValue(id+"#"+lastId);
			response.addCookie(findCookie);
			String value = findCookie.getValue();
			System.out.println(value);
		}
		//重定向，跳转到商品信息页面
		response.sendRedirect("ProductInfo.html");
	}
	
	//根据name找到相应的cookie
	private Cookie findCookie(Cookie[] cookies, String name) {
		if(cookies!=null){
			for (Cookie cookie : cookies) {
				if(name.equals(cookie.getName())){
					return cookie;
				}
			}
		}
		return null;
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

商品信息页面（ProductInfo.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品信息</title>
</head>
<body>
	<p><h3>商品页面......</h3></p>
	<p><h3>商品信息......</h3></p>
	<p><h3>商品信息......</h3></p>
	<a href="product_list.jsp"> <input type="button" value="返回" > </a>
</body>
</html>

扩展：点击商品列表页面的清除浏览记录可删除浏览记录

public class ClearBRServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Cookie cookie = new Cookie("bshistory","");
		cookie.setMaxAge(0);//参数设置为0，Cookie立即失效，下次浏览器发送请求将不会在携带该Cookie
		response.addCookie(cookie);
		response.sendRedirect("product_list.jsp");
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

访问http://localhost:8080/BrowsingHistory/product_list.jsp

在这里插入图片描述

点击浏览小米MIX Alpha，执行ProductServlet，创建一个Cookie对象把它传给浏览器，并重定向跳转到商品信息页面
在这里插入图片描述
点击返回

再次点击浏览华为Mate30 Pro，执行ProductServlet，根据name找到刚才的cookie，得到之前保存在Cookie的商品id信息，将现在点击商品id的和之前的拼接，再传给浏览器，并重定向跳转到商品信息页面。

点击返回

在这里插入图片描述

点击删除浏览记录
在这里插入图片描述
在product_list.jsp就获取不到该浏览记录的cookie的相关信息了

Thinking in Coder

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cookie案例：显示商品浏览记录

设计一个简单的商品列表页面（product_list.jsp），提供几件商品，当点击某商品时，跳转到（ProductServlet）执行相关逻辑，再重定向跳转到商品信息页面（ProductInfo.html），点击商品信息页面的返回按钮，跳转回商品列表页面（product_list.jsp），显示刚才浏览的商品。扩展：点击商品列表页面的清除浏览记录可删除浏览记录。代完善：显示的浏览记录是商品id...
复制链接

扫一扫