Cookie在前端中的实践

  对于很多不了解后端的前端er来说,很多涉及后端的知识点都是一道坎,因为不懂后端,所以很多知识都只能在文章上得到,却很少有机会实践,导致很多这块的知识点都是模模糊糊的。在这里,推荐大家去学习一下 Node.js,尝试一下就知道,用 Node.js 搭建一个 mock 服务器是多么简单的一件事情,新世界的大门就此敞开。

  在开始聊 Cookie 之前,我们需要搭建一个本地服务器,我们将用这个服务器来操作 Cookie。

  执行完上面一系列的命令之后,你就能看到如下的文件结构,我们需要操作的文件就是 main.js

  在介绍 Cookie 是什么之前,我们来看看 Cookie 是如何工作的:

  2. 接下来,浏览器发送了一个请求给服务器(这个请求是还没带上 Cookie 的)

  5. 接下来,以后的每一次请求,都会带上这些 Cookie,发送给服务器

  现在我们就可以看到 Cookie 字段已经带上了,再刷新几次看 Cookie 也还是在的。

  我们可以看到,Cookie 就是一段字符串。但这个字符串是有格式的,由键值对 key=value 构成,键值对之间由一个分号和一个空格隔开。

  说了这么多,大家应该知道 Cookie 是什么吧。整理一下有以下几个点:

  每个 Cookie 都有一定的属性,如什么时候失效,要发送到哪个域名,哪个路径等等。在设置任一个 Cookie 时都可以设置相关的这些属性,当然也可以不设置,这时会使用这些属性的默认值。

  expires / max-age 都是控制 Cookie 失效时刻的选项。如果没有设置这两个选项,则默认有效期为 session,即会话 Cookie。这种 Cookie 在浏览器关闭后就没有了。

  上面的代码服务器设置了两个 Cookie,一个设置了失效刻,另外一个没有设置,也就是默认的失效时刻 session。现在我们重启服务并且刷新一下页面。

  现在响应头部已经加上了响应的设置失效时刻的字段了。在控制台输入下面的代码。

  所以,Cookie 的失效时刻到了之后,通过kie 就访问不到这个 Cookie 了,当然以后发送请求也不会再带上这个失效的 Cookie 了。

  如果同时设置了 max-age 和 expires,以 max-age 的时间为准。

  name、domain 和 path 可以标识一个唯一的 Cookie。domain 和 path 两个选项共同决定了 Cookie 何时被浏览器自动添加到请求头部中发送出去。具体是什么原理请看 Cookie 的作用域和作用路径 这个章节。

  如果没有设置这两个选项,则会使用默认值。domain 的默认值为设置该 Cookie 的网页所在的域名,path 默认值为设置该 Cookie 的网页所在的目录。

  secure 选项用来设置 Cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时,包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。

  默认情况下,Cookie 不会带 secure 选项(即为空)。所以默认情况下,不管是 HTTPS 协议还是 HTTP 协议的请求,Cookie 都会被发送至服务端。

  这个选项用来设置 Cookie 是否能通过 js 去访问。默认情况下,Cookie 不会带 httpOnly 选项(即为空),客户端是可以通过 js 代码去访问(包括读取、修改、删除等)这个 Cookie 的。当 Cookie 带 httpOnly 选项时,客户端则无法通过 js 代码去访问(包括读取、修改、删除等)这个 Cookie。

  在客户端是不能通过 js 代码去设置 一个 httpOnly 类型的 Cookie 的,这种类型的 Cookie 只能通过服务端来设置,发送请求的时候,我们看到请求头还是会带上这个设置了 httpOnly 的 Cookie,如下图。

  明确一点:Cookie 可以由服务端设置,也可以由客户端设置。看到这里相信大家都可以理解了吧。

  子域,是相对父域来说的,指域名中的每一个段。各子域之间用小数点分隔开。放在域名最后的子域称为最高级子域,或称为一级域,在它前面的子域称为二级域。

  这几天又降温了,简直冷的不想出门。在暖和的家里泡上一杯热茶,自由自在地玩玩游戏,可以说...[详细]

  每日头条、业界资讯、热点资讯、八卦爆料,全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与,TechWeb官方微博期待您的关注。

相关阅读