Cookie——客户端存储

概述

cookie API 是通过document.cookie属性来实现的。cookie是存储在访问者的计算机中的变量,与页面相关联。

cookie包含在HTTP协议中,服务器端程序可以为页面创建或更新cookie值,通过HTTP请求回送给客户端,浏览器则会将cookie值自动保存起来, 再次请求该页面时，浏览器会自动把与该页面相关联的所有cookie值放到HTTP请求中一起发送给服务器。

因为cookie能被自动处理这个特点,服务器端WEB应用程序的Session ID通常就是放在cookie里进行保存的。

• 格式 每个cookie的格式：<cookie名>=<值>；名称和值都必须是合法的标志符。
• 大小限制 cookie是有大小限制的，每个cookie所存放的数据不可超过4kb，如果cookie字符串的长度超过了4kb，则该属性将返回空字符串。
• 有效期限 cookie是存在有效期的。在一般情况下，一个cookie的生命周期就是在浏览器关闭的时候结束。如果希望cookie能在浏览器关掉之后还能够使用，就必须要为该cookie设置有效期。
• 域和路径 cookie存在域和路径的概念。域就是domain的概念，因此不同的域之间不能互相访问cookie。路径就是path的概念，一个网页所创建的cookie只能被与这个网页在同一目录或子目录下的所有网页访问。

代码示例

简单的存取操作

document.cookie = 'username=Hudao';

以上代码中的'username'表示cookie名称，'Hudao'表示表示这个名称对应的值。假设cookie名称并不存在，那么就是创建一个新的cookie；若存在，则修改这个cookie名称对应的值。如果要多次创建cookie，重复此方法即可。

设置有效期

在默认情况下，cookie会在浏览器关闭的时候消除，但可通过expires来设置cookie的有效期。语法如下：

document.cookie = "name=Hudao;expires=date";

上面的代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

var _date = new Date(); 
_date.setDate(_date.getDate()+30);
_date.toGMTString();

上面的代码可解释为：

• 通过new生成一个Date的实例，得到当前的时间。
• getDate()方法得到当前本地月份中的某一天，接着加上30就是此cookie可在本地保存30天。
• 通过setDate()方法来设置时间；
• 用toGMTString()方法把Date对象转换为字符串，并返回结果