前端开发中Cookie那些事儿

标签: JavaScript | 发表时间:2014-04-09 06:59 | 作者:愚人码头
出处:http://www.blogread.cn/it/

标签:   Cookie

前段时间做了项目,在前端实现中频繁的操作cookie,记录几点供大家参考!

cookie操作在前端开发过程中经常遇到,当然如果只是用来存储一些简单用户数据,还是比较简单的,我们要做的可能只是设置cookie名,值,过期时间等,读取也只要根据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 属性。
在前段时间的项目中我就用js去读取一个cookie,结果怎么都取不到这个值,最后查证这个cookie是httpOnly的,花了近2个小时,悲剧了。

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。

您可能还对下面的文章感兴趣:

  1. 使用Http-only Cookie来防止XSS攻击 [2013-06-08 23:36:19]
  2. 如何设置一个永远无法删除的Cookie [2013-05-08 13:49:14]
  3. 前端开发中Cookie那些事儿 [2012-09-03 23:12:56]
  4. Cookie安全漫谈 [2012-05-11 00:01:25]
  5. 用Flash理跨域上传或异步请求不能传Cookie的解决方案 [2011-11-13 21:17:12]
  6. Flash请求不能传Cookie的PHP解决方案 [2011-09-19 23:54:26]
  7. 网站统计:第一方Cookie和第三方Cookie [2011-08-26 22:22:20]
  8. 在浏览器中加密Cookie [2011-06-02 23:44:09]
  9. 一段Javascript的代码 [2011-02-14 21:26:04]
  10. FlashCookie [2010-10-14 09:09:23]
  11. js对cookie的几个操作函数(仅作备忘) [2010-03-24 22:28:36]
  12. curl 命令使用cookie [2009-11-09 13:28:06]
  13. js制作提示公告带关闭可保存cookie [2009-11-04 14:58:14]
  14. js添加查询删除cookie操作代码 [2009-11-04 13:34:49]

相关 [前端 开发 cookie] 推荐:

前端开发中Cookie那些事儿

- - IT技术博客大学习
标签:   Cookie. 前段时间做了项目,在前端实现中频繁的操作cookie,记录几点供大家参考. cookie操作在前端开发过程中经常遇到,当然如果只是用来存储一些简单用户数据,还是比较简单的,我们要做的可能只是设置cookie名,值,过期时间等,读取也只要根据cookie的名读取相应的cookie值就可以了.

细说Cookie

- ~Wing~ - 博客园-首页原创精华区
Cookie虽然是个很简单的东西,但它又是WEB开发中一个很重要的客户端数据来源,而且它可以实现扩展性很好的会话状态, 所以我认为每个WEB开发人员都有必要对它有个清晰的认识. 本文将对Cookie这个话题做一个全面的描述, 也算是本人对Cookie的认识总结. Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.

LTPA Cookie原理

- - Web前端 - ITeye博客
Lightweight Third-Party Authentication (LTPA)是IBM Websphere和Domino产品中使用单点登录技术. 当服务器配置好LTPA认证方式,用户通过浏览器成功登录后,服务器会自动发送一个session cookie给浏览器;此cookie中包含一个LTPA Token.

session和cookie详解

- - ITeye博客
摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一 技术. 本文将详细讨论session的工作机制并且对在Java web application中应用session机制时常见的问题作出解答. 二、HTTP协议与状态保持.

Cookie深度解析

- - CSDN博客互联网推荐文章
       最近在公司做了Web端单点登录(SSO)功能,基于Cookie实现,做完之后感觉有必要总结一下,本文着重讲解Cookie,下文会说明单点登录的实现方案.        众所周知,Web协议(也就是HTTP)是一个无状态的协议. 一个Web应用由很多个Web页面组成,每个页面都有唯一的URL来定义.

Cookie:并非洪水猛兽

- - 互联网分析
腾讯科技 雷建平 王可心. 任何事物都有两面性,网易、品友互动等将针对客户的“高超话术”用到央视315暗访人员身上,不但未能提升销售业绩,还致使自己乃至整个互联网营销业深陷舆论危机. 在央视315晚会镁光灯下,不仅身为媒体的网易无意中被推上舞台,品友互动、易传媒、亿玛、悠易、传漾公司这些数字广告平台商“火”了一把:涉嫌通过Cookie盗取用户信息.

文章: Cookie安全漫谈

- - InfoQ cn
在Web应用中,Cookie很容易成为安全问题的一部分. 从以往的经验来看,对Cookie在开发过程中的使用,很多开发团队并没有形成共识或者一定的规范,这也使得很多应用中的Cookie成为潜在的易受攻击点. 在给Web应用做安全架构评审(Security architecture review)的时候,我通常会问设计人员以下几个问题:.

奇怪的 IE Cookie 设置

- - IE浏览器中文网站
今天接到一个奇怪的问题,所有的浏览器都可以正常执行,唯独在 IE10 浏览器下运行会有问题,花了一些时间找问题到底是什么,这篇记录一下,希望能帮到不小心路过的网友. 经过一番 IE8, IE10, Chrome, Firefox 交叉测试后,发现 IE8 的状态栏有个小小的安全性提示(本来要截图,结果 … 选了接受 cookie 就 … 看不到图了),幸好有使用 IE8 做测试,真是不幸中的大幸,IE10 完全自己暗槓起来什么都不说啊 ~~~.

深入解析Cookie技术

- - FreeBuf.COM
在Web技术的发展史上,Cookie技术的出现是一次重大的 变革. 但是, Cookie技术又是一项非常有争议的技术,从它诞生之日起就成了广大网络用户和Web开发人员的一个争论焦点,原因不是Cookie的功能太弱,而是认为Cookie的使用会对网络用户的隐私信息构成危害. Cookie技术最先被Netscape公司引入到Navigator浏览器中.

说说Cookie和Session - 逝宇、

- - 博客园_首页
Session和Cookie在网站开发中是用来保存用户与后端服务器的交互状态. 而且,他们的优点和应用场景是对立的. 完整地描述:当一个用户通过HTTP访问一个服务器时,这个服务器会将一些Key/Value键值返回给客户端浏览器,并给这些数据加上一些限制条件,在条件符合时,用户下次访问这个服务器时,数据又将完整地带回给服务器.