javascript 操作cookies及正确使用cookies的属性_javascript技巧

一、从写 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 格式。

时间: 2024-08-30 20:08:09

javascript 操作cookies及正确使用cookies的属性_javascript技巧的相关文章

JavaScript操作select元素和option的实例代码_javascript技巧

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

JavaScript操作class和style样式代码详解_javascript技巧

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

JavaScript操作DOM元素的childNodes和children区别_javascript技巧

对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

JavaScript操作XML/HTML比较常用的对象属性集锦_javascript技巧

节点对象属性 childNodes-返回节点到子节点的节点列表 firstChild-返回节点的首个子节点. lastChild-返回节点的最后一个子节点. nextSibling-返回节点之后紧跟的同级节点. nodeName-返回节点的名字,根据其类型. nodeType-返回节点的类型. nodeValue-设置或返回节点的值,根据其类型. ownerDocument-返回节点的根元素(document对象). parentNode-返回节点的父节点. previousSibling-返回

javascript中方便增删改cookie的一个类_javascript技巧

主要是通过对document.cookie字符串的分析来进行功能的组装的. 温习一下javascript中对cookie的操作: 增加cookie可以用document.cookie="userId=111";来实现 完整版可以用:document.cookie="userId=111;domain=.google.com;path=\;secure=secure;expire="+date.toGMTString(); 可以设置cookie的过期时间,域名,路径

在JavaScript中调用Java类和接口的方法_javascript技巧

前言 本文中所有的代码使用 JavaScript 编写,但你也可以用其他兼容 JSR 223 的脚本语言.这些例子可作为脚本文件也可以在交互式 Shell 中一次运行一个语句的方式来运行.在 JavaScript 中访问对象的属性和方法的语法与 Java 语言相同. 本文包含如下几部分: 1.访问 Java 类 为了在 JavaScript 中访问原生类型或者引用 Java 类型,可以调用 Java.type() 函数,该函数根据传入的完整类名返回对应对象的类型.下面代码显示如何获取不同的对象类

浅谈JavaScript 数据属性和访问器属性_javascript技巧

在JavaScript中对象被定义为"无序属性的集合,其属性可以包含基本值.对象或函数."通俗点讲,我们可以把对象理解为一组一组的名值对,其中值可以是数据或函数. 创建自定义对象通常有两种方法,第一种就是创建一个Object的实例,然后再为其添加属性和方法,例如: var person = new Object(); person.name = "Scott"; person.age = 24; person.sayName = function(){ alert(

javascript教程:关于if简写语句优化的方法_javascript技巧

UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz

JavaScript中的Array 对象(数组对象)_javascript技巧

 1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&