javascript操作cookies 以及 正确使用cookies的属性

 

在 JS(JavaScript) 操作cookies比较复杂，在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了，而 JS 里面，我们面对的是 cookie 的字符串，你自己编写这个字符串写入客户端，然后自己解析这个字符串。

一、从写 cookie 说起。

var the_date = new Date("December 31, 2020");
var expiresDate = the_date.toGMTString();
document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;
第一句是日期对象；

第二句将日期格式转换成 GMT 格式；编者者： GMT 即格林威治标准时间，现在也称 UTC 即全球标准时间。

第三句是将 cookie 内容写入客户端。

其中 expires 是系统使用的，表示 cookie 的失效日期（也可以省略），expires 不可读。

escape 是对 cookie 值进行编码，这是为了处理中文、空格等而设立的。

二、取 cookie 是比较简单的。

function GetCSS()
{
var cookieStr = document.cookie; //取 cookie 字符串，由于 expires 不可读，所以 expires 将不会出现在 cookieStr 中。

if (cookieStr == "")
{
return "main1"; //没有取到 cookie 字符串，返回默认值
}

var cookieValue = cookieStr.split("; "); //将各个 cookie 分隔开，并存为数组，多个 cookie 之间用分号加空隔隔开，不过前面我们只使用了一个 cookie，它的值与 expires 之间也是用分号加空格隔开的
var varName = "userDefineCSS";
var startPos = -1;
var endPos = -1;
for (var i=0; i<cookieValue.length; i++)
{
startPos = cookieValue[i].indexOf(varName);
if (startPos != 0)
{
continue; //当前 cookie 不是名称为 varName 的 cookie，判断下一个 cookie
}
startPos += varName.length + 1; //当前 cookie 就是名称为 varName 的 cookie，由于有等号，所以 +1
endPos = cookieValue[i].length;
var css = unescape(cookieValue[i].substring(startPos, endPos));
return css;
}

return "main1";
}
由于写 cookie 时使用了 escape，所以返回 cookie 值时使用 unescape 进行解码。

---

正确使用cookies的属性

 

首先看看cookies的结构

我们这里所说的 cookie 结构并非其存储结构，而是其表现结构，主要通过研究其表现结构来实现 JS(JavaScript) 对 cookie 的操作。

cookie 的表现结构较为简单，每个 cookie 由 cookie 名称 和 cookie 值组成，用等号表示二者关系，各个 cookie 之间用分号加空格隔开。正如前面所说 expires、path、domain 均不可读，所以在表现结构中也没有体现出来。

cookieName1=cookieValue1; cookieName2=cookieValue2[...; cookieNamen=cookieValuen]

通过分隔分号加空格符号，就可以获得各个 cookie，再通过分隔等号，就可以得出各个 cookie 的名称和值。

cookie 的子键，只是表现在 cookieValue 上，一个子键的结构是：子键名称=子键值，多个子键之间用 & 连接起来。比如：

cookieName1=子键名称1=子键值1&子键名称2=子键值2

如果是 ASP 文件，我们会发现 cookie 结构中有这样一段字符串：ASPSESSIONIDQSTDRATQ=24位字符

关于此，查看：http://www.aspxuexi.com/aspbasic/cookie/2006-6-10/Session_Cookie.htm

 

---

 

同名的 cookie，不同的 domain 或不同的 path，属不同的 cookie；
同名的 cookie，相同的 domain 且相同的 path，不同的 expires，属同一个 cookie。

cookie 有路径－－path，表示哪些路径下的文件有权限读取该 cookie。

path 应该以 "/" 结尾，同名 cookie，不同 path，属不同的 cookie

document.cookie = "N1=1; path=/path/";
document.cookie = "N1=2; path=/path";
document.cookie = "N1=3; path=path/";

如上代码，前两句使用的是绝对路径，即相对于站点根目录的网页目录，第三句使用的是相对路径，相对于当前目录的。

第一句和第二句在于结尾不同，虽然他们所表达的权限相同，但是由于 path 字符串不同，会形成两个同名的 cookie，容易造成混乱，我们建议不要使用第二句这种格式，因为系统默认也是以 "/" 结尾的。

所以如上述是三个 cookie，之间不会相互覆盖。

path 属性值有大小写之分，应与浏览器中的地址栏的输入一致

document.cookie = "N1=1; path=/path/";
document.cookie = "N1=2; path=/paTH/";

这是两个不同的 cookie，因为　path 属性值大小写不同，如果我们在地址栏输入的是 path，那么就读取第一个 N1，如果我们输入的是 paTH，那么就读取第二个 N1

path 不可读

同 expires 一样，path 只可写，不可读。

path 不可更改

同 expires 不一样，如果我们试图更改 path，那么实际上我们是另外写了一个 cookie，而不是更改了 path 值。

path 权限有继承性

假如指定了 /test/ 目录有权限读取某 cookie，那么 /test/ 之下的目录 /test/t/ 也有权限读取该 cookie。

cookie 有失效日期－－expires，如果还没有过失效期，即使重新启动电脑，cookie 仍然不会丢失，如果没有指定 expires 值，那么在关闭浏览器时，cookie 即失效。

在 JS(JavaScript) 中使用 expires 时应该和 cookie 同时写入，如：
document.cookie = "clr=red; expires=" + expiresDate;

而如下写法是不正确的：
document.cookie = "clr=red";
document.cookie = "expires=" + expiresDate;
这样写会形成两个 cookie，第二个 cookie 的名称是 expires，两个 cookie 均没有指定失效日期。

expires 不可读
这就是为什么，我们在 ASP 中使用 response.Write request.cookies("cname").expires 会出错，同样在 JS(JavaScript) 中使用 document.cookie 也不会显示出 expires。

expires 值应该使用 GMT 格式的时间
var the_date = new Date("December 31, 2020");
var expiresDate = the_date.toGMTString(); //转换成 GMT 格式。编者者： GMT 即格林威治标准时间，现在也称 UTC 即全球标准时间。 

提供一个javascript操作cookies的函数

< html >  

< head >  
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >  
< title > JS 对 Cookie 的操作函数 </ title >  
</ head >  

< body >  

< script type = " text/javascript "  language = " javascript " >  
< ! --  
// 写入 cookie 
// 不区分 cookieName 的大小写 
// 不考虑子键 
function  ResponseCookies(cookieName, cookieValue, expires) 
{ 
if  (expires) 
{ 
// 指定了 expires 
document.cookie  =  ResponseCookies_GetCookieName(cookieName)  +   " = "   +  escape(cookieValue)  +   " ; expires= "   +  expires.toGMTString(); 
} 
else  
{ 
document.cookie  =  ResponseCookies_GetCookieName(cookieName)  +   " = "   +  escape(cookieValue); 
} 
} 

// 获取并返回与 cookieName 同名的 cookie 名称，允许大小写不同 
// 如果不存在这样的 cookie，就返回 cookieName 
function  ResponseCookies_GetCookieName(cookieName) 
{ 
var lowerCookieName  =  cookieName.toLowerCase(); 
var cookieStr  =  document.cookie; 

if  (cookieStr  ==   "" ) 
{ 
return cookieName; 
} 

var cookieArr  =  cookieStr.split( " ;  " ); 
var pos  =   - 1 ; 
for  (var i = 0 ; i < cookieArr.length; i ++ ) 
{ 
pos  =  cookieArr[i].indexOf( " = " ); 
if  (pos  >   0 ) 
{ 
if  (cookieArr[i].substring( 0 , pos).toLowerCase()  ==  lowerCookieName) 
{ 
return cookieArr[i].substring( 0 , pos); 
} 
} 
} 

return cookieName; 
} 

// 获取并返回 cookie 值 
// 不区分 cookieName 的大小写 
// dfltValue 为默认返回值 
// 不考虑子键 
function  RequestCookies(cookieName, dfltValue) 
{ 
var lowerCookieName  =  cookieName.toLowerCase(); 
var cookieStr  =  document.cookie; 

if  (cookieStr  ==   "" ) 
{ 
return dfltValue; 
} 

var cookieArr  =  cookieStr.split( " ;  " ); 
var pos  =   - 1 ; 
for  (var i = 0 ; i < cookieArr.length; i ++ ) 
{ 
pos  =  cookieArr[i].indexOf( " = " ); 
if  (pos  >   0 ) 
{ 
if  (cookieArr[i].substring( 0 , pos).toLowerCase()  ==  lowerCookieName) 
{ 
return unescape(cookieArr[i].substring(pos + 1 , cookieArr[i].length)); 
} 
} 
} 

return dfltValue; 
} 

document.write( " 写入名称为 cv 的 cookie...<br> " ); 
ResponseCookies( " cv " ,  " cv20 " ,  null ); 

document.write( " 写入名称为 Ab，带失效日期的 cookie...<br> " ); 
var expires  =   new   Date ( " December 31, 2045 " ); 
ResponseCookies( " Ab " ,  " Ab20 " , expires); 

document.write( " 读取名称为 ab 的 cookie... "   +  RequestCookies( " ab " ,  "" )); 
-->  
</ script >  

</ body >  

</ html >