JavaScript Cookie 机制详解：设置、读取、限制与安全建议

Cookie 基本概念与工作原理

Cookie 概念解析

Cookie 原意为“甜饼”，由 W3C 组织提出，最初由 Netscape 社区开发。如今它已成为行业标准，包括 IE、Netscape、Firefox 和 Opera 在内的所有主流浏览器均支持 Cookie 功能。

鉴于 HTTP 协议本身是无状态的，服务器无法仅凭网络连接判断客户身份。为此，系统为每个客户端颁发一个通行证，即 Cookie。无论用户如何访问，都必须携带此通行证，服务器据此确认用户身份，这便是 Cookie 的核心工作原理。

Cookie 本质上是一小段文本数据。当客户端请求服务器且服务器需记录用户状态时，会通过 response 向客户端浏览器下发一个 Cookie。浏览器将其保存，后续再次请求该网站时，会将网址与该 Cookie 一并提交给服务器。服务器通过检查 Cookie 来识别用户状态，并可根据需要修改其内容。

Cookie 机制概述

在程序开发中，会话跟踪至关重要。理论上，单一用户的所有请求操作应归属于同一个会话，而不同用户的请求则应相互隔离。例如，用户 A 在超市购买的商品必须存入 A 的购物车，无论购买时间如何，都不能混入用户 B 或 C 的会话中。

Web 应用程序依赖 HTTP 协议传输数据，而 HTTP 是无状态协议。数据交换结束后，客户端与服务器的连接即关闭，再次交互需建立新连接。这意味着服务器无法通过连接状态来跟踪会话。例如，用户 A 将商品加入购物车后，再次购买时服务器已无法判断该行为属于 A 还是 B 的会话。因此，必须引入一种机制来跟踪会话。

Cookie 正是解决这一问题的机制，它弥补了 HTTP 协议无状态的缺陷。在 Session 机制普及之前，几乎所有网站都采用 Cookie 来跟踪会话状态。

JavaScript 设置 Cookie 的方法

JS 设置 Cookie 的方法

假设在 A 页面中需要将变量 username 的值（如“jack”）保存到 Cookie 中，key 值为 name，相应的 JS 代码如下：

 document.cookie="name="+username;

在 Cookie 的名称或值中，禁止使用分号（;）、逗号（,）、等号（=）以及空格。虽然名称通常容易满足这些要求，但保存的值往往不确定。为解决此问题，可使用 escape() 函数进行编码，它将特殊符号转换为十六进制表示（例如空格编码为“20%”），从而允许存储于 Cookie 值中，同时也能避免中文乱码问题。

document.cookie="str="+escape("I love ajax"); 
// document.cookie="str=I%20love%20ajax"; 

当使用 escape() 编码后，在获取值时需使用 unescape() 进行解码，才能还原原始的 Cookie 值。

JavaScript 读取与删除 Cookie

JS 读取 Cookie 的方法

假设 Cookie 中存储的内容格式如下：name=jack;password=123

则在 B 页面中获取变量 username 值的 JS 代码如下：

var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

读取 Cookie 的完整实现

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

Cookie 的限制、优缺点及安全建议

Cookie 的局限性

尽管 Cookie 在持久保存客户端数据方面提供了便利，并分担了服务器存储的压力，但它仍存在诸多局限性。

首先，每个特定域名下最多只能生成 20 个 Cookie。

1. IE6 或更低版本最多支持 20 个 Cookie。

2. IE7 及后续版本最多允许 50 个 Cookie。

3. Firefox 最多支持 50 个 Cookie。

4. Chrome 和 Safari 未做硬性限制。

IE 和 Opera 会清理近期最少使用的 Cookie，而 Firefox 则随机清理 Cookie。

Cookie 的最大大小约为 4096 字节，为确保兼容性，一般建议不超过 4095 字节。

IE 提供了一种名为 userData 的持久化用户数据存储机制，自 IE5.0 开始支持。每个数据块最多 128K，每个域名下最多 1M。该持久化数据存储在缓存中，若缓存未清理，数据将一直存在。

Cookie 的优点

1. 通过良好的编程实践，可以控制保存在 Cookie 中的 Session 对象大小。

2. 通过加密和安全传输技术（SSL），可以降低 Cookie 被破解的可能性。

3. 仅在 Cookie 中存放不敏感数据，即使被盗也不会造成重大损失。

4. 控制 Cookie 的生命周期，使其不会永久有效。这能防止攻击者利用过期的 Cookie 进行恶意操作。

Cookie 的缺点

1. Cookie 的数量和长度受限。每个域名最多只能有 20 条 Cookie，每条 Cookie 长度不能超过 4KB，否则会被截断。

2. 存在安全问题。如果 Cookie 被拦截，攻击者即可获取所有 Session 信息。即使进行加密，拦截者只需原样转发 Cookie 即可达到目的，无需知晓其具体含义。

3. 某些状态无法保存在客户端。例如，为防止重复提交表单，需在服务器端保存计数器。若将此计数器保存在客户端，则无法起到任何作用。

以上所述是小编给大家介绍的 JS 中 Cookie 的使用及缺点讲解，希望对大家有所帮助。如果大家有任何疑问，欢迎留言，小编会及时回复大家！