资讯专栏INFORMATION COLUMN

浅谈http协议(二):cookie的历史由来与实际应用

RyanHoo / 810人阅读

摘要:协议当初为了让协议尽量简洁,制定为无状态协议,即指每次请求之前是相互独立的,当前请求并不会记录它的上一次请求信息。其实是失效日期,必须是格式的时间可以通过或者来获得。根据规范,浏览器访问只会携带的,而不会携带的。

HTTP协议当初为了让协议尽量简洁,制定为无状态协议,即指每次request请求之前是相互独立的,当前请求并不会记录它的上一次请求信息。那么问题来了,开发中经常需要用到状态记录,比如日常的登录网站,不可能每次登录都要客户重新输入密码,这样用户体验肯定会很差,那如何让无状态的http协议将状态记录下来呢?
于是浏览器厂商发明了cookie来解决这个难题。
Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie,设置了过期时间Expires(Cookie的几个属性之一)的Cookie会存储在硬盘里面,不同操作系统cookie的储存路径会有所不同,而没有设置该属性的Cookie会存储在内存里面,此时浏览器的选项卡可以共享同一个cookie信息,关闭浏览器就会清除该Cookie!
首先看一下cookie在前后端交互中的应用:

第一次验证成功后,服务端会在响应头信息中带上“set-cookie”字段,浏览器监测到该字段之后,会把其中的值对号入座写入浏览器的cookie的属性中

存储在cookie中的数据,在它过期之前,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销;但如果这些数据是每个请求都需要发给服务端的数据(比如身份认证信息),浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息(最典型的就是身份认证信息token)”就特别适合放在cookie中。而服务器端通过验证cookie中的信息,实现了验证,也让浏览器端省去了每次都需要输入登录信息的麻烦。

为了实现cookie的作用,除了name和value之外,设计者还给它增加了七个属性,分别是expires/max-age、domain、path、secure、HttpOnly、samesite,这些属性是通过cookie选项来设置的,在设置任一个cookie时都可以设置相关的这些属性,当然也可以不设置,这时会使用这些属性的默认值。

Expires和Max-Age
expires选项用来设置“cookie 什么时间内有效”。expires其实是cookie失效日期,expires必须是 GMT 格式的时间(可以通过new Date().toGMTString()或者 new Date().toUTCString() 来获得)。
如expires=Thu, 25 Feb 2016 04:18:00 GMT表示cookie讲在2016年2月25日4:18分之后失效,对于失效的cookie浏览器会清空。如果没有设置该选项,则默认有效期为session,即会话cookie。这种cookie在浏览器关闭后就没有了,属于内存cookie。而max-age就是cookie写入之后的有效时长,比如max-age=600就是600秒后,cookie则会失效。max-age的优先级高于expires

domain 和 path
domain是域名,path是路径,两者加起来就构成了 URL,domain和path一起来限制 cookie 能被哪些 URL 访问,domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域,要想cookie在多个二级域名中共享,需要设置domain为顶级域名。

HttpOnly
告知浏览器不允许通过脚本document.cookie去更改这个值,同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取,但仍然在浏览器安装目录中以文件形式存在。

secure
安全标志,指定后,只有在使用SSL链接(https)时候才能发送到服务器,如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息,所以不要把重要信息放在cookie中。

除了服务器端返回的set-cookie字段,浏览器端也可以对cookie进行操作,有npm为我们封装好的插件js-cookie: https://www.npmjs.com/package...,不过我们还是用原生方法手动实现一遍

获取cookie:
在控制台输入document.cookie,或者js代码中console.log(document.cookie)可以得到下图:

可以看到,cookie是一个个键值对(“键=值”的形式)加上分号空格隔开组合而成, 形如: "name1=value1; name2=value2; name3=value3",可以用正则表达式来提取等号后面的值

function getCookie(name) {
  var value = "; "+ document.cookie;
  var parts = value.split("; " + name + "=");
  if(parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}

写入cookie

function setCookie (name, value, day) {
  if(day !== 0){     //当设置的时间等于0时,不设置expires属性,cookie在浏览器关闭后删除
    var expires = day * 24 * 60 * 60 * 1000
    var date = new Date(+new Date()+expires);
    document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString()
  }else{
    document.cookie = name + "=" + escape(value)
  }
}

注意:expires使用GMT或UTC格式的时间, 我这里没有指定路径(path)和域(domain), 当没有指定路径时默认为当前路径下,如对 于“https://home.cnblogs.com/u/ma...”下设置的cookie,其path为"/u/maderlzp", 其domain为当前域名“home.cnblogs.com”

删除cookie
设置cookie过期时间小于当前时间,那么就会删除该cookie

function deleteCookie(name) {
  document.cookie = name + "=;  expires=Thu, 01 Jan 1970 00:00:01 GMT;"
}

Cookie具有不可跨域名性。根据Cookie规范,浏览器访问Google.com只会携带Google.com的Cookie,而不会携带Baidu.com的Cookie。Google.com也只能操作Google.com的Cookie,而不能操作Baidu.com的Cookie

<完>

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54191.html

相关文章

  • 浅谈http协议):cookie历史由来实际应用

    摘要:协议当初为了让协议尽量简洁,制定为无状态协议,即指每次请求之前是相互独立的,当前请求并不会记录它的上一次请求信息。其实是失效日期,必须是格式的时间可以通过或者来获得。根据规范,浏览器访问只会携带的,而不会携带的。 HTTP协议当初为了让协议尽量简洁,制定为无状态协议,即指每次request请求之前是相互独立的,当前请求并不会记录它的上一次请求信息。那么问题来了,开发中经常需要用到状态记...

    琛h。 评论0 收藏0
  • 在浏览器输入地址后,这个世界发生了什么(http协议浅谈

    摘要:响应组成状态消息报头响应正。状态组成服务器协议的版本,服务器发回的响应状态代码和状态代码的本描述。向指定的资源发出显示请求。向指定资源提交数据,请求服务器进行处理例如提交表单或者上传文件。回显服务器收到的请求,主要用于测试或诊断。 引言 这篇文章是我各处收集有关于http的知识,不成体系,爱看不看?,看完点赞。 我们输入网址之后发生的事情 输入网址并回车(URL 包括 协议名称 域名...

    luckyw 评论0 收藏0
  • 浅谈前端跨域

    摘要:一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。 一、什么是跨域? 跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑,a.com域名下的js不能操作b.com或者c.com域名下的对象。 当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算叫跨域。 一个正常...

    dunizb 评论0 收藏0
  • session和cookie实用手记

    摘要:那么,怎么才能让服务器识别浏览器身份,认为是同一用户的多次请求,从而达到数据共享呢这就要用到会话技术了,本质上就是数据持久化存储。 由来 浏览器和服务器间的数据交互,就是会话。 但是呢,http协议是无状态无记忆的,就会导致业务的不连续性。 [不连续性的说明]譬如你在xxx网站A界面登录成功,当你点击跳转到B界面时,又会提示请登录。 ...

    endiat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<