JavaScript 存储Cookie

Cookie

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

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

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

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

存储cookie

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

 
 
  1. document.cookie = "userId=Gates"; 

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

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

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

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

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

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

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

max-age

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

 
 
  1. 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属性是可选的。

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

path

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

 
 
  1. 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的域名。格式为:

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

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

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

secure

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

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

 
 
  1. 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用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

猜你喜欢

转载自blog.csdn.net/ixygj197875/article/details/80086578