javascript cookie操作指南

发布时间:2020-12-07编辑:脚本学堂
为大家介绍javascript操作cookie的一些方法,有需要的朋友,可以参考下。

在 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位字符

同名的 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>

您可能感兴趣的文章:
JavaScript静态页面间传递cookie的实现代码
JS读取与写入Cookies的方法
js操作cookie详解
javascript编程基础(14)-cookies