cookie是什么(案例：增删改)

最新推荐文章于 2022-11-16 09:49:03 发布

原创最新推荐文章于 2022-11-16 09:49:03 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cookie #cookie增删改

网页设计基础专栏收录该内容

5 篇文章

订阅专栏

Cookie是Web应用程序用于保持用户状态的一种机制，因HTTP协议无状态特性而诞生。服务器通过响应头设置cookie，浏览器将其保存并下次请求时发送回服务器。cookie分为会话cookie（关闭浏览器即消失）和永久cookie（设定有效期）。创建、修改和删除cookie可通过JavaScript实现，如document.cookie API。示例代码展示了如何在浏览器中操作cookie。

cookie是什么？
是由服务器端生成，发送给User-Agent(一般指浏览器)客户端，浏览器将cookie以键值对的形式保存到某个目录下的文本文件内。下次请求该网站时就把cookie发送回服务器。（cookie就是一个小文件，浏览器对其大小一般限制在4k,用来记录一些信息（一般用作标识））
为什么有cookie?
web应用程序是使用Http协议传输数据的，而Http协议是无状态的，一旦数据交换完成就会断开连接，再次交换就要重新建立连接，此时，服务器并不知道该浏览器与自己进行过数据交互，意味着服务器无法从连接上跟踪会话。
那么，如何让服务器记住这个浏览器？(如何跟踪记录用户行为？)，就可以使用cookie

浏览器在发送请求后，服务器除了正常的响应之外，会在响应头里加入一个set-cookie:id=XXX，浏览器接收之后会存入本地文档（txt）,下次向该服务器发送请求时，会附带此cookie.

cookie是具有保质期的

会话cookie(临时cookie) 关闭窗口就删除（默认这种情况，亲测Chrome、IE，使用创建cookie后关闭浏览器内容为空了。）
永久cookie：设置有效期

ps:由于chrome不支持本地操作cookie，所以案例已IE为例。

cookie创建

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>

	</head>
	<body>
		<script type="text/javascript">
			document.cookie = 'name=john';
			alert("cookie:" + document.cookie);
		</script>
	</body>
</html>

修改，同增；cookie存在修改方法，直接从新写个同名变量直接赋值就是修改原有的内容。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>

	</head>
	<body>
		<script type="text/javascript">
			document.cookie = 'name=tom';
			alert("cookie:" + document.cookie);
		</script>
	</body>
</html>

删除 cookie,cookie为空

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>

	</head>
	<body>
		<script type="text/javascript">
			// cookie存入name属性
			document.cookie = 'name=tom';
			// cookie存入age属性
			document.cookie = 'age=18';

			// cookie设置过期时间，由于01 Jan 1970 已经过去了，所以cookie的name内容就删除了,age属性还在
			document.cookie = 'name=tom;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
			alert("cookie:" + document.cookie);
		</script>
	</body>
</html>