JavaScript DOM之Cookie详解

cookie有的地方习惯使用复数形式的cookies，指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术，它的数据是存在用户的终端上，也就是在浏览器上的。

一、什么是cookie

随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来，我们常常需要记录访问者的一些信息，比如用户的账号，购物车存储的商品等，就需要用到cookie技术。

1、cookie简介

cookie最早是网景公司发明的，是一种跟踪用户会话的技术。可以理解为本地缓存，它由服务器生成，保存在用户本地浏览器上的小文本文件，它可以包含与用户相关的信息。
对于一个网站而言，有很多用户在访问，我们怎么区分每一个用户呢，HTTP协议是无状态协议，服务器单从网络连接上是无法区分每一个用户的，于是服务器就给浏览器发送cookie，浏览器会把这个cookie保存在本地，用户每次访问都会带上自己的cookie，服务器就能区分不同的用户了。
注意：如果用户端（浏览器）设置禁止cookie，那么cookie就不用建立了。

2、cookie的特点

2.1、大小限制

cookie是保存在本地的小文本文件，所以cookie对数据的大小进行了限制，一个浏览器cookie数量最多为300个，每个cookie的大小不能超过4kb，每个网站允许设置的cookie数量不超过20个。

2.2、不可跨域

每个网站在用户访问的时候都会带上自己的cookie，因为cookie具有不可跨域性，所以不能在不同的站点使用，cookie在客户端由浏览器来管理。

2.3、时效性

cookie可以设置生成时间，也就是过期时间。在这个时间内cookie都是有效的，超过这个时间cookie会被清楚，我们也可以手动清楚cookie。

2.4、不安全性

cookie从某种程度上来说已经严重危及用户的隐私和安全，它包含了一些敏感信息，比如用户名、计算机名等，尽管这些数据会经过加密，但还是有泄漏的风险。

3、cookie的用途

3.1、记录用户信息

3.2、永久登陆

二、如何操作cookie

1、查看cookie

浏览器上如何查看cookie：设置 - 隐私设置 - 内容设置 - 所有cookie和网站数据，通过这个我们可以看到cookie的相关信息，如：cookie的名字，内容，域，路径，是否允许脚本运行，创建时间和过期时间等
js查看：document.cookie

// 查看cookie设置成函数
function getCookie(key){
	var reg = new RegExp(key + '=([^;]*)'); // 正则表达式
	var arr = document.cookie.match(reg); // 获取正则匹配后的值
	if(!arr) return null;
	return unescape(arr[1]); // 转码并返回值
}

2、添加cookie

// 添加cookie使用的是document对象的cookie属性，既可以获取cookei也可以设置cookie
// 设置cookie
document.cookie = 'name=zhishuseo';

3、修改cookie

// 修改cookie其实就是重新设置cookie，我们把设置（修改）cookie封装成一个函数
function setCookie(key,value,time){
	var endTime = new Date();  // 创建时间对象
	// 计算过期时间戳
	endTime.setTime(endTime.getTime() + time*60*1000);
	var gmtTime = endTime.toGMTString(); //转换成格林尼治标准时间
	var value = escape(value); // 为支持中文进行ASCII转吗
	document.cookie = key + '=' + value + ';expires=' + gmtTime;
}

setCookie('city','北京',1);  // 调用函数设置cookie

4、删除cookie

// 删除cookie的原理就是把cookie的过期时间设置为0或者小于0
function delCookie(key){
	var endTime = new Date();
	endTime.settime(endTime.getTime() - 1);
	var gmt = endTime.toGMTString();
	document.cookie = key + '=null;expires=' + gmt; // 设置cookie
}
// 这里我们在计算时间的时候让当前时间减去1cookie就过期了，就会被删除。                                                                                                                        

5、设置cookie过期时间

// 在设置cookie的时候加上时间参数，就可以设置它的过期时间，这个时间必须是格林尼治标准时间。
// 设置过期时间
var minite = 30; // 30分钟
var endTime = new Date(); // 当前时间戳
// 过期时间戳，并转换成GMT时间格式
endTime.setTime(endTime.getTime() + minite*60*1000);
var gmt = endTime.setGMTString(); // 格林尼治标准时间
// 修改cookie并设置过期时间
document.cookie = 'name3=zhishuseo;expires=' + gmt;
// 显示cookie
console.log(document.cookie);