javascript-cookie.jpg
1. Cookie是什么
Web浏览器和服务器通过HTTP协议进行数据交流和通信，并且HTTP协议是无状态(stateless)的协议，所谓HTTP无状态，总结大概就是如下4点，
- HTTP协议对于事务处理没有记忆能力。
- 对同一个url请求没有上下文关系。
- 每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影。
- 服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器。
很多商业新的网站都需要在不同页面之间共享会话信息，例如在一个用户完成注册之后，在诸如下单和个人中心页面，都需要用户的登录信息，而无状态的HTTP协议无法达到这样的要求。那么通过什么样的技术才能在不同页面之间共享用户的会话信息呢？这就是cookie的用武之地了。
简单来说，cookie就是为了保存浏览器和服务器之间的会话状态，用以提升用户体验的一个存储介质。说起来cookie真是一个很甜很萌的命名呢，也许正是因为cookie优化了用户体验，像个小甜点一样让人开心吧。
2. Cookie工作原理
在浏览器和服务器通信时，服务器以cookie的格式向用户的浏览器发送一些数据，如果浏览器可以接收cookie，它会将cookie以纯文本(plain text record)的形式存储在用户的磁盘上。现在，当用户访问网站的另一个页面的时候，浏览器会将相同的cookie发送给服务器用来取回相关信息。一旦服务器获取到客户端发送的cookie信息，服务器就会知道之前与该浏览器通信时存储的什么内容。
Cookie并不是什么复杂的概念，它是一串记录了如下5个可变长度字段的纯文本，
- Expires − 失效期，表示cookie失效的日期。如果expires是空白，那么在用户关闭浏览器的时候，该cookie就会失效。
- Domain − 域名
- Path − 路径，存储cookie的文件路径或一个web页面。一般来说推荐设置path为空，这样你可以从任何路径或页面获取到cookie。
- Secure − 安全，如果包含了secure，那么只能从安全的服务器获取cookie；如果secure字段为空，则没有上述限制。
- Name=Value，cookie都是以键值对的形式进行存储和读取的。
最初，cookie是为CGI编程而设计。cookie中包含的数据可以自动地在web浏览器和web服务器之间传播，所以服务器上的CGI脚本(scripts)可以对客户端存储的cookie进行读写操作。
在javascript中，可以通过Document对象的cookie属性来熟练地操作浏览器的cookie。javascript可以读取、创建、修改和删除应用于当前页面的cookie内容。
3. Cookie操作
与数据库类似，cookie也有相关的增删改查的操作，总结起来包括cookie的存储、读取、设置有效期以及删除等，下面通过代码逐个讲解。
3.1 存储cookie
创建cookie最简单的方式就是为document.cookie对象赋值一段字符串，如下代码所示，
document.cookie = "key1=value1;key2=value2;expires=date";
在这里，expires属性是可选的，如果你为expires属性设置一个有效的日期或时间，那么该cookie将在给定的日期或时间之后失效，此后cookie的值就不能访问了。
注意：cookie的值(value)不能包含
逗号,，分号;和空白符。因此，在存储一个值到cookie之前，应该先用javascript内置的escape()函数对值的内容进行编码；反过来，读取cookie值的时候，应该先用unescape()函数对cookie值进行解码。
存储cookie的代码如下所示，
<html>
<head>
<script type="text/javascript">
function writeCookie() {
if (document.myform.customer.value == "") {
alert("Enter some value")
return
}
cookieValue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookieValue
document.write("Setting Cookies : " + "name=" + cookieValue)
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="writeCookie()"/>
</form>
</body>
</html>
3.2 读取cookie
读取cookie就像存储cookie一样简单，因为document.cookie对象的值就是cookie。因此任何时候当你想要获取cookie的时候就可以使用document.cookie这个字符串。在document.cookie这个字符串中，它包含了一系列name=value这样通过分号;分隔的键值对。可以使用字符串string的split()方法将cookie字符串分割，获取cookie的每一个name以及对应的value。
获取所有的cookie，如下代码所示，
<html>
<head>
<script type="text/javascript">
function readCookie() {
var allCookies = document.cookie
document.write("All cookies : " + allCookies)
// get all the cookies pairs in an array
cookieArray = allCookies.split(';')
for (var i = 0; i < cookieArray.length; i++) {
name = cookieArray[i].split('=')[0]
value = cookieArray[i].split('=')[1]
document.write("Key is : " + name + " and Value is : " + value)
}
}
</script>
</head>
<body>
<form name="myform" action="">
<p>click the following button and see the result:</p>
<input type="button" value="Get Cookie" onclick="readCookie()"/>
</form>
</body>
</html>
3.3 设置cookie有效期
为了延长当前浏览器会话中的cookie的生命周期，可以通过expires属性为cookie设置一个失效期，如下代码所示，设置cookie的有效期为1个月，
<html>
<head>
<script>
function writeCookie() {
var now = new Date()
now.setMonth(now.getMonth() + 1)
cookieValue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookieValue
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookieValue)
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <inpu type="text" name="customer">
<input type="button" value="Set Cookie" onclick="writeCookie()">
</form>
</body>
</html>
3.4 删除cookie
如果将cookie删除，那么后面的请求试图访问cookie将会得到空的字符串。为了删除cookie，将cookie的失效期设置为一个过去的时间，如下代码所示，设置了cookie的失效期为1个月之前，
<html>
<head>
<script type="text/javascript">
function writeCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookieValue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookieValue
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookieValue)
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="wirteCookie()"/>
</form>
</body>
</html>
4. 小结
以上就是javascript中关于cookie的基本概念介绍和简单demo示范，读者可以查阅更多资料了解更多关于cookie的知识，如果有错误或者不当之处，还请读者朋友指正。
网友评论