尝尝cookie甜甜的曲奇饼干

上一篇文章帅华君 彻底理解sessionStorage和localStorage ,从数据格式、有效期、作用域、API用例、安全性以及数据空间限制几个方面对localStorage和sessionStorage进行了详尽的介绍,如果有任何讲解的不妥之处,请多多指教,互通有无。

本篇介绍cookie同样可以从以上几个方面(cookie安全性、cookie的数据格式、cookie的有效期、cookie的作用域、cookie使用API以及cookie的空间限制以及更多琐碎内容等等)出发。

认识cookie

cookie单从名字上指小饼干、小甜点一类的,不过之前他给我的感觉就像之前服务端给我的感觉一样,陌生而冰冷。不过在频繁接触服务端开发之后,一些网站后台的东西渐渐变得熟悉了解起来,正如那句话说的那样:

一切恐惧与排斥来自认知狭隘与不够了解。

当看到他,认识他,熟悉他到最后喜欢上他确实需要一个漫长的过程,一个了解的过程。

你可以叫他曲奇饼干。

可以在后端对他进行读/写操作,也可以在前端对他进行读/写操作,每一次访问页面,浏览器都会将cookie捎带脚的发送给后端,后端可以读/写也可以不做任何操作,然后相应浏览器的请求,再返回cookie给客户端。cookie会自动(不需要开发者过多关心,浏览器帮你完成cookie在前端与后端的不断流动)在Web浏览器与Web服务器之间传输。

安全

cookie是有同源策略限制的。

做人做事,安全第一,几乎所有的事情首先要考虑的就是就是他的安全性怎么样,有了这层保障,才能展开后续的事情。

cookie在前端与后端之间流动传输,在早期cookie专门用来标识用户身份,比如用户是否为登录的状态。不过由于cookie滥用,记录用户浏览隐私记录等事情,因此cookie在大众心理的形象一直不怎么好,用户甚至可以借助浏览器设置禁用cookie。

开发者可以使用如下表达式检测用户是否金庸cookie:

navigator.cookieEnabled  //若返回true,则cookie是启用的

在JavaScript中操作cookie不会采用任何加密机制,通过http传输cookie是不安全的,但是通过https加密协议传输数据是安全的。

数据格式

使用cookie非常简单,cookie是以字符串的形式存储的:

document.cookie = "version="+encodeURIComponent(document.lastModified)

全部的属性名/值对都是写在这个字符串中,使用分号和一个空格来分别各个名/值对。

document.cookie = "name=value; path=path; max-age=60"

因此如果要追加cookie,只需要在原cookie后添加:

document.cookie += "; name=value"

有效期

默认的,cookie的有效期很短暂,它只持续存在web浏览器的会话期间,关闭浏览器,cookie保存的数据就丢失了,sessionStorage相比cookie的有效期稍微长一些或一样,session的有效期为标签页打开的这段时间,而cookie与整个浏览器进程运行的有效期一样长。

要想延长cookie的有效期,设置cookie的max-age属性,该属性指定cookie的有效时长,单位是秒。

document.cookie = "max-age="+(24*60*60)

上面的设置使得cookie的有效期为一天时间,到时间cookie自动清除。

作用域

与localStorage和sessionStorage相同的是,cookie也被同源策略限制,除此之外,cookie还被路径path限制,所以cookie比storage们的作用域限制更强,不过也可以通过设置cookie的path属性让cookie和storage同有相同的作用域。

默认情况下,cookie的path和创建他的web页面有关,并对该web页面同目录或子目录其他web页面可见。

将cookie的path属性值设置为 ‘/’,cookie和sessionStorage在作用域这件事情上就相同了。

不过cookie比storage牛掰的一点是,cookie的同源策略其中一条:主机名相同,则可以放宽这一限制,通过设置:

document.domain = '.example.com'

所有一级域名相同的web页面就都可以读/写设置了上面值属性值的web页面的cookie了,当然还要考虑path属性是否满足条件。

因此,如果将path设置为 “/”,domian设置为”.example.com“,那么该cookie对所有example.com域下的任何其他服务器都可见。如果没有设置cookie的domain属性,那么domain属性的默认值是当前web服务器的主机名。

并不是说domain可以随便设置,对于所有web页面来说,只能设置两种domain,一个是默认的主机名,你可以重复的在设置一次,还有一个就是一级域名。除此之外不能将domain设置为其他一级域名。

所以domain的作用仅仅是为了方面同一域名下的其他主机之间共享cookie。

API用例

  • 保存cookie

    document.cookie = "name=value"  //开发者可以自行将结构化数据编码成原始值字符串
    
  • 读取cookie

    document.cookie  //返回的cookie需要开发者自己解码成结构化数据格式
    

cookie局限性

cookie的设计初衷是给服务器端用来存储少量数据的,该数据会在每次请求一个相关的URL时传递到服务器中。

定义cookie规范的标准要求,不允许浏览器保存超过300个cookie,为每一个web服务器保存的cookie数量不能超过20个,而且cookie保存的数据不能超过4KB。

实际上,现代浏览器允许cookie总数超过300个,但是部分浏览器对单个cookie的大小限制仍然只有4KB。


本篇完。

显然cookie更适合使用少量空间存储标志用户身份的数据,和需要前端后端随着请求交换少量数据的场景,比如登录状态等,不适用于存储大量信息。

请使用Github账号登录留言
发布日期 » 2017年11月24日 周五
原创声明 » 请勿复制转载,谢谢配合。
🌈找工作【HTML5/数据可视化创新界面设计与开发/Web3D/新媒体艺术】兼具技术探索与艺术创意的职位。希望职位具备与员工能力相匹配的薪酬待遇、晋升空间与成长机会。已离职,目前在石家庄居住,工作城市不限。合适细聊。
陈帅华的微信二维码