JS cookie的设置、获取和删除（非常详细）

在编程领域，Cookie 代表一种小型的文本文件，可以让开发人员在用户计算机上存储少量的数据（大约 4kb），来记录用户的某些信息，例如用户身份、喜好等，当用户下次访问网站时，网站可以通过检索这些信息来为用户展示个性化页面。另外，一些电商网站的购物车也用到了 Cookie 技术。

在 HTTPS 协议还未诞生之前，Web 浏览器和服务器之间需要通过 HTTP 协议进行通信，HTTP 协议是一种无状态协议，当服务器与浏览器之间完成一次交互（浏览器向服务器发送请求，服务器做出响应）后，链接会被关闭，服务器就会忘记浏览器的一切。Cookie 就是为了让服务器能够记住浏览器而发明的。

当使用浏览器访问某个页面时，可以将一些浏览器的信息会存储在 Cookie 中，浏览器每次向服务器发送请求时，Cookie 会作为请求的一部分一同发送给服务器，这样服务器就能通过 Cookie 中的信息来记住浏览器了。

提示：Cookie 由若干个键/值对组成（例如 key1=value1;key2=value2），一个 Cookie 可以存储 4kb 的数据，超过长度的 Cookie 将被忽略。您也可以在浏览器端禁用 Cookie，这样一些借助 Cookie 才能完成的操作将无法进行。另外，不要在 Cookie 中存储账号、密码等敏感信息。

Cookie 最初是为 PHP、ASP 等服务器端脚本语言设计的，但是我们也可以使用 JavaScript 来操作，只是操作起来比较复杂，下面就来简单介绍一下如何使用 JavaScript 来操作 Cookie。

JS 设置 Cookie

在 JavaScript 中，您可以通过 document.cookie 属性来创建、读取、修改和删除 Cookie 信息。

创建（设置）新的 Cookie 信息，需要以 name=value 形式的字符串来定义新的 Cookie 信息，如下例所示：

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=" + encodeURIComponent("http://c.biancheng网站站点" rel="nofollow" />

注意：运行上面的代码，您会发现 Cookie 并没有创建，这是因为 Cookie 是用来与服务器进行交互的，所以要成功创建 Cookie 需要借助服务器环境。您可以阅读《PHP开发环境》一节，来搭建一个简单的开发环境，并将我们定义的 HTML 文件移动到应用目录（默认为安装目录的 apache2/htdocs 目录下）中，然后访问我们的 HTML 文件。

Cookie 并不会一直存在，默认情况下，Cookie 的生周期就是浏览器的会话周期，即用户关闭浏览器后，Cookie 就会失效。 如果想要延长 Cookie 的生周期，您可以使用 max-age 属性来指定 Cookie 可以存在的时间（单位为秒），默认为 -1，即关闭浏览器后失效。

如果将 max-age 设置为一个负数，则表示该 Cookie 为临时 Cookie，关闭浏览器后就会失效。如果设置为 0，则表示删除该 Cookie。若要将 Cookie 的生周期设置为 30 天的话，则可以像下面这样：

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

提示：通过为 Cookie 设置生周期，不仅可以延长 Cookie 存在的时间，还可以让 Cookie 提前失效。

默认情况下，Cookie 可用于同一域名下的所有网页，但如果您为 Cookie 设置了 path 属性，那么 Cookie 就只能在该域名指定路径下的网页中使用，例如网站的域名为 c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

/**

* 添加 Cookie

* @param {[string]} name [Cookie 的名称]

* @param {[string]} value [Cookie 的值]

* @param {[number]} daysToLive [Cookie 的过期时间]

*/

function setCookie(name, value, daysToLive) {

// 对 cookie 值进行编码以转义其中的分号、逗号和空格

var cookie = name + "=" + encodeURIComponent(value);

if(typeof daysToLive === "number") {

/* 设置 max-age 属性 */

cookie += "; max-age=" + (daysToLive*24*60*60);

}

document.cookie = cookie;

}

JS 获取 Cookie

读取（获取） Cookie 同样使用 document.cookie 即可，该属性会返回一个字符串，字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息，例如 url=http://c.biancheng网站站点" rel="nofollow" />

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" />

// 创建一个 Cookie

document.cookie = "url=http://c.biancheng网站站点" rel="nofollow" /> 提示：若 path 属性为 /，在修改时也可以省略 path 属性。

JS 删除 Cookie

删除 Cookie 与修改 Cookie 类似，只需要重新将 Cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可，如下例所示：

// 创建一个 Cookie
document.cookie = "url=http://c.biancheng网站站点" rel="nofollow"  />