Cookie 在前端开发中的一些事

Cookie 操作在前端开发过程中会经常遇到。

Cookie 的属性

除了 name(名)和 value(值), Cookie 还有以下一些可选属性,用来控制 Cookie 的有效期,作用域,安全性等:

expires属性

指定了 Cookie 的生存期,默认情况下 Cookie 是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户退出浏览器后这些值也会丢失,如果想让 Cookie 存在一段时间,就要为 expires 属性设置为未来的一个用毫秒数表示的过期日期或时间点,expires 默认为设置的 expires 的当前时间。现在已经被 max-age 属性所取代,max-age 用秒来设置 Cookie 的生存期。

如果 max-age 属性为正数,则表示该 Cookie 会在 max-age 秒之后自动失效。浏览器会将 max-age 为正数的 Cookie 持久化,即写到对应的 Cookie 文件中。无论客户关闭了浏览器还是电脑,只要还在max-age秒之前,登录网站时该 Cookie 仍然有效。

如果 max-age 为负数,则表示该 Cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效,关闭窗口后该 Cookie 即失效。max-age 为负数的 Cookie ,为临时性 Cookie ,不会被持久化,不会被写到 Cookie 文件中。 Cookie 信息保存在浏览器内存中,因此关闭浏览器该 Cookie 就消失了。 Cookie 默认的 max-age 值为-1。

如果 max-age 为0,则表示删除该 Cookie 。 Cookie 机制没有提供删除 Cookie 的方法,因此通过设置该 Cookie 即时失效实现删除 Cookie 的效果。失效的 Cookie 会被浏览器从 Cookie 文件或者内存中删除。

如果不设置 expires 或者 max-age 这个 Cookie 默认是 Session 的,也就是关闭浏览器该 Cookie 就消失了。

这里要说明一下:Session 的 Cookie 在 IE6 下,如果用户实在网页上跳转打开页面或新开窗口(包括 target=”_blank”,鼠标右键新开窗口),都是在同一个 Session 内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session 存在,还是同一个 Session, Cookie 还能共享。在前段时间的项目中 IE6 下吃了很大一个亏。

Domain 属性

Domain 属性可以使多个 WEB 服务器共享 Cookie 。Domain 属性的默认值是创建 Cookie 的网页所在服务器的主机名。不能将一个 Cookie 的域设置成服务器所在的域之外的域。

例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的 Cookie 值。如果b.sodao.com的页面创建的 Cookie 把它的 Path 属性设置为“/”,把Domain 属性设置成“.sodao.com”,那么所有位于b.sodao.com的网页和所有位于a.sodao.com的网页,以及位于sodao.com域的其他服务器上的网页都可以访问这个 Cookie 。

Path 属性

它指定与 Cookie 关联在一起的网页。在默认的情况下 Cookie 会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

Secure 属性

它是一个布尔值,指定在网络上如何传输 Cookie ,默认是不安全的,通过一个普通的http连接传输;

HttpOnly 属性

HttpOnly 属性限制了 Cookie 对 HTTP 请求的作用范围。特别的,该属性指示用户代理忽略那些通过“非 HTTP” 方式对 Cookie 的访问(比如浏览器暴露给 js 的接口)。注意 HttpOnly 属性和 Secure 属性相互独立:一个 Cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

Cookie 的传输

浏览器将 Cookie 信息以 name-value 对的形式存储于本地,每当请求新文档时,浏览器将发送 Cookie ,目的是让 Server 可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小 Cookie ,以达到传输性能的最大化。

Cookie 的编码和解码

由于 Cookie 的名/值中的值不允许包含分号,逗号和空格符,为了最大化用户代理和服务器的兼容性,任何被存储为 Cookie 值的数据都应该被编码,例如用我们前端熟知的 js 全局函数 encodeURIComponent 编码和 decodeURIComponent 解码。

Cookie 作为客户端存储

前面说了每当请求新文档时,浏览器将发送 Cookie 到服务器,导致WEB性能下降。所以不建议将 Cookie 作为客户端存储一种实现方案,替代方案参见:JavaScript 本地存储实践(html5 的 localStorage 和 ie 的 userData)等。

同名的 Cookie

同名的 Cookie ,不同的 Domain 或不同的 Path ,属不同的 Cookie ;同名的 Cookie ,相同的 Domain 且相同的 Path ,不同的 expires,属同一个 Cookie 。