cookies前后端操作（前端二）

最新推荐文章于 2024-09-03 04:38:37 发布

dengjili

最新推荐文章于 2024-09-03 04:38:37 发布

阅读量6k

点赞数

分类专栏：前端

随意转载。

本文链接：https://blog.csdn.net/dengjili/article/details/83692928

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

服务器端操作Cookies

客户端每次请求都会附带cookies信息

服务端向前台写入Cookies

服务端代码

@WebServlet("/CookieServlet")
public class CookieServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// Cookie 处理需要对中文进行编码与解码
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 定义一个cookie对象
		Cookie cookie = new Cookie("color", URLEncoder.encode("黄色", "UTF-8"));
		Cookie name = new Cookie("name", URLEncoder.encode("zhang三", "UTF-8"));
		// 设置过期时间为24小时,以秒为单位
		cookie.setMaxAge(60 * 60 * 24);
		name.setMaxAge(60 * 60 * 1);
		// 添加cookie
		response.addCookie(cookie);
		response.addCookie(name);
		request.getRequestDispatcher("/cookie.html").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

页面展示端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>提交表单测试</title>
</head>
<body>
	<form action="ReadCookieServlet" method="get">
		<h2>提交表单测试</h2>
		<p>
			名称：<input type="text" name="txtName" id="txtName1" />
		</p>
		<p>
			价格：<input type="text" name="txtPrice" id="txtPrice1" value="888"
				readonly="readonly" />
		</p>
		<p>
			数量：<input type="text" name="txtAmount" id="txtAmount1" value="999"
				disabled="disabled" />
		</p>
		<input type="hidden" id="key" value="123445"> <input
			type="submit" value="提交" />
	</form>
</body>
</html>

测试，已经写入
在这里插入图片描述

客户端向服务端请求，传递Cookies

前台代码为上面页面共用html

服务端代码

@WebServlet("/ReadCookieServlet")
public class ReadCookieServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// Cookie 处理需要对中文进行编码与解码
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		Map<String, String> returnMap = new HashMap<>();
		Cookie[] cookies = request.getCookies();
		for (Cookie cookie : cookies) {
			String name = cookie.getName();
			String value = URLDecoder.decode(cookie.getValue(), "UTF-8");
			returnMap.put(name, value);
		}
		
		Map<String, String[]> parameterMap = request.getParameterMap();
		for (Map.Entry<String, String[]> entry : parameterMap.entrySet()) {
			returnMap.put(entry.getKey(), entry.getValue()[0]);
		}
		
		// 设置响应内容类型
        response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(returnMap);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

测试，点击提交
在这里插入图片描述
取出浏览器的cookies信息

客户端端操作Cookies

操作cookies的库
https://github.com/js-cookie/js-cookie

对应html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户端读写Cookie</title>
<!-- 第三方操作cookies -->
<script src="js/js.cookie.min.js" type="text/javascript"></script>
<script type="text/javascript">
	function writeCookie() {
		var key = document.getElementById("key").value;
		var value = document.getElementById("value").value;
		var expire = document.getElementById("expire").value;
		//在当前域下写入cookie
		Cookies.set(key, value, { expires: 7 });
		alert("操作成功");
	}
	function readCookie() {
		//在当前域根据key读取cookie
		var key = document.getElementById("key").value;
		var value = Cookies.get(key);
		alert("值：" + value);
	}
	function removeCookie() {
		//在当前域指定的cookie
		var key = document.getElementById("key").value;
		Cookies.remove(key, { path: '/' });
		alert("清除：" + key);
	}
</script>
</head>
<body>
	<button type="button" onclick="writeCookie();">写</button>
	<button type="button" onclick="readCookie();">读</button>
	<button type="button" onclick="removeCookie();">清除</button>

	<div>
		<p>
			key:<input type="text" id="key" />
		</p>
		<p>
			value:<input type="text" id="value" />
		</p>
		<p>
			expire:<input type="text" id="expire" />
		</p>
	</div>
</body>
</html>