一文带你看懂cookie，面试前端不用愁

本文由云+社区发表

在前端面试中，有一个必问的问题：请你谈谈cookie和localStorage有什么区别啊？

localStorage是H5中的一种浏览器本地存储方式，而实际上，cookie自己并非用来作服务器存储的。但在 localStorage 出现以前，cookie被滥用当作了存储工具，什么数据都放在cookie中，即便这些数据只在页面中使用、而不须要随请求传送到服务端（固然cookie也作了一些限制：大小受限、每一个域名下生成的cookie数量受限）。就像CSS中的float，最初被设计出来的初衷，是用于作文字环绕效果的，就是一个图片、一段文字，给图片加上float:left的样式后，就会产生文字环绕图片的效果。可是后来发现float结合<div>，能够实现以前经过<table>实现的网页布局，所以就被“误用于”网页布局了。

那么经过阅读本文，你能够了解：

1.cookie是什么，cookie的属性有哪些，如何设置cookie，cookie的缺点，和session的区别

2.再也不混淆cookie和webStorage，简单介绍浏览器的本地存储的两种方式：sessionStorage和localStorage

1.cookie

1.1 cookie是什么

cookie是当你浏览某个网站的时候，由web服务器存储在你的机器硬盘上的一个小的文本文件。它其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。当你再次来到这个网站时，web服务器会先看看有没有它上次留下来的cookie。若是有的话，会读取cookie中的内容，来判断使用者，并送出相应的网页内容，好比在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登陆等等。

当客户端要发送http请求时，浏览器会先检查下是否有对应的cookie。有的话，则自动地添加在request header中的cookie字段。注意，每一次的http请求时，若是有cookie，浏览器都会自动带上cookie发送给服务端。那么把什么数据放到cookie中就很重要了，由于不少数据并非每次请求都须要发给服务端，毕竟会增长网络开销，浪费带宽。因此对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其余类型的数据就不适合了。

简单的说就是：

(1) cookie是以小的文本文件形式（即纯文本），彻底存在于客户端；cookie保存了登陆的凭证，有了它，只须要在下次请求时带着cookie发送，就没必要再从新输入用户名、密码等从新登陆了。

(2) 是设计用来在服务端和客户端进行信息传递的；

这里我简单地画了个图，能够方便理解：

第一次请求时：

第一次请求

下一次请求时：

下一次请求

浏览器会把cookie放到请求头一块儿提交给服务器，cookie携带了会话ID信息。服务器会根据cookie辨认用户：因为cookie带了会话的ID信息，能够经过cookie找到对应会话，经过判断会话来判断用户状态。

1.2 cookie的属性

在浏览器的控制台中，能够直接输入：document.cookie来查看cookie。cookie是一个由键值对构成的字符串，每一个键值对之间是“; ”即一个分号和一个空格隔开。

document.cookie

注意，这个方法只能获取非 HttpOnly 类型的cookie

每一个cookie都有必定的属性，如何时失效，要发送到哪一个域名，哪一个路径等等。这些属性是经过cookie选项来设置的，cookie选项包括：expires、domain、path、secure、HttpOnly。在设置任一个cookie时均可以设置相关的这些属性，固然也能够不设置，这时会使用这些属性的默认值。在设置这些属性时，属性之间由一个分号和一个空格隔开。代码示例以下：

"key=name; expires=Sat, 08 Sep 2018 02:26:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

cookie的属性能够在控制台查看：Application选项，左边选择Storage，最后一个就是cookie，点开便可查看。

• Expires、Max Age:

Expires选项用来设置“cookie 什么时间内有效”。Expires实际上是cookie失效日期，Expires必须是 GMT 格式的时间（能够经过 new Date().toGMTString()或者 new Date().toUTCString() 来得到）。

new Date().toGMTString()或者 new Date().toUTCString()

如expires=Sat, 08 Sep 2018 02:26:00 GMT表示cookie将在2018年9月8日2:26分以后失效。对于失效的cookie浏览器会清空。若是没有设置该选项，这样的cookie称为会话cookie。它存在内存中，当会话结束，也就是浏览器关闭时，cookie消失。

补充：

Expires是 http/1.0协议中的选项，在http/1.1协议中Expires已经由 Max age 选项代替，二者的做用都是限制cookie 的有效时间。Expires的值是一个时间点（cookie失效时刻= Expires），而Max age的值是一个以秒为单位时间段（cookie失效时刻= 建立时刻+ Max age）。 另外， Max age的默认值是 -1(即有效期为 session )； Max age有三种可能值：负数、0、正数。负数：有效期session；0：删除cookie；正数：有效期为建立时刻+ Max age

• Domain和Path

Domain是域名，Path是路径，二者加起来就构成了 URL，Domain和Path一块儿来限制 cookie 能被哪些 URL 访问。即请求的URL是Domain或其子域、且URL的路径是Path或子路径，则均可以访问该cookie，例如：

某cookie的 Domain为“baidu.com”, Path为“/ ”，若请求的URL(URL 能够是js/html/img/css资源请求，但不包括 XHR 请求)的域名是“baidu.com”或其子域如“api.baidu.com”、“dev.api.baidu.com”，且 URL 的路径是“/ ”或子路径“/home”、“/home/login”，则均可以访问该cookie。

补充：

发生跨域xhr请求时，即便请求URL的域名和路径都知足 cookie 的 Domain和Path，默认状况下cookie也不会自动被添加到请求头部中。

• Size

Cookie的大小

• Secure

Secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其余安全协议时，包含 Secure选项的 cookie 才能被发送至服务器。

默认状况下，cookie不会带Secure选项(即为空)。因此默认状况下，不论是HTTPS协议仍是HTTP协议的请求，cookie 都会被发送至服务端。但要注意一点，Secure选项只是限定了在安全状况下才能够传输给服务端，但并不表明你不能看到这个 cookie。

补充：

若是想在客户端即网页中经过 js 去设置Secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是没法设置secure类型cookie的。

• httpOnly

这个选项用来设置cookie是否能经过 js 去访问。默认状况下，cookie不会带httpOnly选项(即为空)，因此默认状况下，客户端是能够经过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则没法经过js代码去访问（包括读取、修改、删除等）这个cookie。

在客户端是不能经过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能经过服务端来设置。

能够在浏览器的控制台中看出哪些cookie是httpOnly类型的，HTTP下带绿色对勾的便是，如图：

httponly

只要是httponly类型的,在控制台经过document.cookie是获取不到的，也不能进行修改。

之因此限制客户端去访问cookie，主要仍是出于安全的目的。由于若是任何 cookie 都能被客户端经过document.cookie获取，那么假如合法用户的网页受到了XSS攻击，有一段恶意的script脚本插到了网页中，这个script脚本，经过document.cookie读取了用户身份验证相关的 cookie，那么只要原样转发cookie，就能够达到目的了。

1.3 cookie的设置、读取、删除方法

cookie既能够由服务端来设置，也能够由客户端来设置。

1.3.1 服务端设置cookie

前面1.1中介绍过，客户端第一次向服务端请求时，在相应的请求头中就有set-cookie字段，用来标识是哪一个用户。

下图我是登陆腾讯云的某个页面的响应头截图，能够看到响应头中有两个set-cookie字段，每段对应一个cookie，注意每一个cookie放一个set-cookie字段中，不能将多个cookie放在一个set-cookie字段中。具体每一个cookie设置了相关的属性：expires、path、httponly，具体属性含义能够结合1.2 cookie的属性来看：

response headers

服务端设置cookie的范围：

服务端能够设置cookie 的全部选项：expires、domain、path、secure、HttpOnly

1.3.2 客户端设置cookie

cookie不像web Storage有setItem，getItem，removeItem，clear等方法，须要本身封装。简单地在浏览器的控制台里输入：

document.cookie="name=lynnshen; age=18"

但发现只添加了第一个cookie:"name=lynnshen"，后面的cookie并无添加进来:

最简单的设置多个cookie的方法就是重复执行document.cookie = "key=name"：

document.cookie = "name=lynnshen";
document.cookie = "age=18";

再看控制台：

注意：

当name、domain、path 这3个字段都相同的时候，cookie会被覆盖。

下面是我本身简单封装的设置、读取、删除cookie的方法：

设置cookie:

function setCookie(name,value,iDay){
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = name + "=" + value + ";expires=" + oDate;
}

读取cookie，该方法简单地认为cookie中只有一个“=”，即key=value，若有更多需求能够在此基础上完善:

function getCookie(name){
    //例如cookie是"username=abc; password=123"
    var arr = document.cookie.split('; ');//用“;”和空格来划分cookie
    for(var i = 0 ;i < arr.length ; i++){
        var arr2 = arr[i].split("=");
        if(arr2[0] == name){
            return arr2[1];
        }
    }
    return "";//整个遍历完没找到，就返回空值
}

删除cookie:

function removeCookie(name){
    setCookie(name, "1", -1)//第二个value值随便设个值，第三个值设为-1表示：昨天就过时了，赶忙删除
}

1.4 cookie的缺点

cookie的缺点：

(1) 每一个特定域名下的cookie数量有限：

IE6或IE6-(IE6如下版本)：最多20个cookie

IE7或IE7+(IE7以上版本)：最多50个cookie

FF:最多50个cookie

Opera:最多30个cookie

Chrome和safari没有硬性限制

当超过单个域名限制以后，再设置cookie，浏览器就会清除之前设置的cookie。IE和Opera会清理近期最少使用的cookie，FF会随机清理cookie；

(2) 存储量过小，只有4KB；

(3) 每次HTTP请求都会发送到服务端，影响获取资源的效率；

(4) 须要本身封装获取、设置、删除cookie的方法；

1.5 cookie和session的区别

cookie是存在客户端浏览器上，session会话存在服务器上。会话对象用来存储特定用户会话所需的属性及配置信息。当用户请求来自应用程序的web页时，若是该用户尚未会话，则服务器将自动建立一个会话对象。当会话过时或被放弃后，服务器将终止该会话。cookie和会话须要配合，具体内容参见1.1节。

当cookie失效、session过时时，就须要从新登陆了。

2.浏览器本地存储：

2.1 localStorage和sessionStorage

在较高版本的浏览器中，js提供了两种存储方式：sessionStorage和globalStorage。在H5中，用localStorage取代了globalStorage。

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，而且当会话结束后，数据也随之销毁。因此sessionStorage仅仅是会话级别的存储，而不是一种持久化的本地存储。

localStorage是持久化的本地存储，除非是经过js删除，或者清除浏览器缓存，不然数据是永远不会过时的。

浏览器的支持状况：IE7及如下版本不支持web storage，其余都支持。不过在IE五、IE六、IE7中有个userData，其实也是用于本地存储。这个持久化数据放在缓存中，只有不清理缓存，就会一直存在。

2.2 web storage和cookie的区别

(1) web storages和cookie的做用不一样，web storage是用于本地大容量存储数据(web storage的存储量大到5MB);而cookie是用于客户端和服务端间的信息传递；

(2) web storage有setItem、getItem、removeItem、clear等方法，cookie须要咱们本身来封装setCookie、getCookie、removeCookie，具体可见1.3节；

3.小结

本文纵向上深度介绍了cookie相关的知识，包括cookie的做用、各个属性的用途、cookie的设置、缺点等等。横向上，将cookie和会话、localStorage作了比较。若有问题，欢迎指正。

此文已由做者受权腾讯云+社区发布

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！