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>