【前端教程】Cookie

5723分钟2020-03-1250俄亥俄州辛辛那提

什么是Cookie

显然不是要说上面图中的Cookie~
Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

如何用js来操作Cookie

检索内容

js中有一个对象document.cookie是储存了所有Cookie的字符串，形式如下：

JavaScript

CookieName1=CookieValue1;CookieName2=CookieValue2....

需要注意的是，这仅仅是一个字符串，不是数组，所以你不能用诸如document.cookie[1]来取出Cookie。正确方法是用字符串分割的方法取得Cookie，下面这段示例代码演示了如何通过Cookie名取得值.

JavaScript

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') {
			c = c.substring(1)
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length, c.length)
		}
	}
	return ""
}

##设置内容
当然，我们也需要一种方法来设置Cookie。首先我们得了解一下Cookie的结构：

属性	含义
Name/Value	设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。
Expires	设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效。
Path	定义了Web站点上可以访问该Cookie的路径。
Domain	指定了可以访问该Cookie的Web站点或域，防止为经授权的访问。
Secure	指定是否使用HTTPS安全协议发送Cookie。
HTTPOnly	防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改，即Cookie只能通过Set-Cookie头来设置

如下代码就是常用的设置cookie的代码：

JavaScript

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}