HTML宝典(第 1 版)
5.1.1 存储Cookie
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

客户端存储

Cookie

cookie是存储在客户端的计算机中的少量数据,如果服务器需要记录该用户状态,就向客户端浏览器颁发一个cookie,客户端浏览器会把cookie保存起来。

当浏览器再请求该网站时,浏览器把请求的网址连同该cookie提交给服务器。服务器检查该cookie,以此来辨认用户状态。服务器可以保存、读取、修改、删除cookie的内容。

操作cookie的API很早就已经定义并实现,但是,由于这些API并没有提供保存、读取、修改、删除的方法。所有对cookie的操作都是通过特殊格式的字符串,读写document对象的cookie属性来完成。

由于所有新旧浏览器都支持cookie,所以仍然被客户端程序员大量使用。本节将介绍如何通过Javascript 来保存、读取、修改、删除cookie的值。

存储cookie

每个cookie都是以一个名/值对形式保存的,要存储cookie,只需把document对象的cookie属性设置为一个字符串形式的值即可。如:

document.cookie = "userId=Gates"; 

如果要一次存储多个名/值对,名/值对之间需要使用“分号加空格”隔开。如:

document.cookie="userId=Gates; password=123"; 

由于cookie的名或值中不允许包含分号、逗号、等号和空格,因此在存储前,可以使用Javascript的全局函数encodeComponent()对值进行编码。

document.cookie看上去像一个属性,可以赋不同的值。但它和一般的属性不同,重复给它赋值,原来的值并不会丢失,例如,连续执行下面两条语句:

document.cookie = "userId=Gates"; 
document.cookie = "password=123"; 

这时浏览器将维护两个cookie,分别是userId和password。可以看出,document.cookie其实是一个容器,给它赋值时,如果该名不存在,则会在容器中添加一个名/值对;如果该名存在,则会修改该名所对应的值。

除了名和值,cookie还有一些可选属性,用来控制其有效期、作用域等。这些属性分别是max-age、path、domain、secure,下面分别介绍。

max-age

cookie的默认只在浏览器的会话期间有效,即浏览器关闭后,这些cookie将会丢失。可以通过设置max-age属性,来指定cookie的有效期,单位是秒。格式为:

document.cookie ="name=value; max-age=maxAge"; 

如果maxAge为正数,则表示该cookie在maxAge秒后被删除;如果为负数,该cookie为临时cookie,关闭浏览器即失效,浏览器也不会以任何形式保存该cookie;如果为0,表示删除该cookie。默认为-1。

如果maxAge为正数,浏览器就会把cookie数据保存在一个文件中。无论客户关闭了浏览器还是关闭电脑,只要还在maxAge秒之前,登录网站时该cookie就仍然有效。

下面函数用来设置一个cookie的值,通过daysToLive参数设置cookie的有效天数,如果daysToLive为0,则会删除该cookie。可以看出,本函数定义的cookie,max-age属性是可选的。

function setCookie(name, value, daysToLive) {
   var cookie = name + "=" + encodeComponent(value);
  
   if(typeof daysToLive === "number")
          cookie += "; max-age=" + (daysToLive*60*60*24);
   document.cookie = cookie ;
}

path

默认情况下,cookie和创建它的页面有关,在某个页面创建了一个cookie,那么该页面及该页面所在目录中的其它页面也可以访问该cookie。如果这个目录下还有子目录,则在子目录中也可以访问。可以通过path属性来指定cookie的可见范围,格式为:

document.cookie = "name=value; path=cookieDir"; 

其中cookieDir表示可访问cookie的目录。设置path属性之后,来自同一个Web服务器的Web页面,只要其URL是以指定的路径前缀开始的,就可以共享cookie。例如,如果在http://www.xxxx.com/catalog/index.html中创建了一个cookie,并把路径设置为“/order/”,那么,该cookie对order目录及其子目录下的页面也是可见的。如果把路径设置为“/”,则该cookie对整个网站都是可见的。注意,cookieDir的最后一个字符必须是“/”。

domain

默认情况下,cookie是不能跨域名访问的,同一个域名下的两个二级域名也不能相互访问cookie,因为二者的域名并不严格相同。

但是,对于大型网站,经常需要在子域名之间共享cookie。如,order.xxx.com域名下的服务器,想读取catalog.xxx.com域名下的cookie。这时,可以通过domain属性来设置可以访问该cookie的域名。格式为:

document.cookie = "name=value; domain=cookieDomain"; 

其中cookieDomain表示可访问cookie的域名。如果设置为“.xxx.com”,则所有以“.xxx.com”结尾的域名都可以访问该cookie。注意,cookieDomain的第一个字符必须是“.”。

如果没有为cookie设置domain属性,则domain属性的默认值是当前的域名。并且,cookie的域名,只能设置为当前服务器的域名。

secure

HTTP协议不仅是无状态的,而且是不安全的。使用HTTP协议的数据不经过任何加密就直接在网络上传播,有被截获的危险。所以,使用HTTP协议传输机密内容会存在安全隐患。

可以通过secure属性来设置是否使用安全协议在网络上传输cookie。格式为:

document.cookie = "name=value; secure=secure"; 

secure属性是布尔类型,默认值为false。如果不希望cookie在HTTP等非安全协议中传输,可以设置为true。如果把secure属性设置为true,就只有当浏览器和服务器通过HTTPS或其它安全协议连接时,才能传递它。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验