前端缓存那些事

166 阅读3分钟

先聊聊cookie

什么是cookie?

了解http的同学,肯定知道,http是一个不保存状态的协议,什么叫不保存状态,就是一个服务器是不清楚是不是同一个浏览器在访问他,Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

cookie原理图解

看下服务器端的具体实现:

//响应中带有cookie 
res.cookie('userid', _id);

response Headers中会set-cookie userid

此后的请求头中都会带着userid

cookie不可跨域

cookie属性全解

  1. name

  2. vlaue

    由于cookie规定是名称/值是不允许包含分号
    ,逗号,空格的,所以为了不给用户到来麻烦,考虑服务器的兼容性,任何存储cookie的数据都应该被编码。

  3. domin

    这个是指的域名,这个代表的是,cookie绑定的域名,如果没有设置,就会自动绑定到执行语句的当前域,还有值得注意的点,统一个域名下的二级域名也是不可以交换使用cookie的,比如,你设置www.baidu.com和image.baidu.com,依旧是不能公用的。

  4. path

    path这个属性默认是'/',这个值匹配的是web的路由,举个例子:

    //默认路径
    www.baidu.com
    //blog路径
    www.baidu.com/blog
    

    我为什么说的是匹配呢,就是当你路径设置成/blog的时候,其实它会给/blog、/blogabc等等的绑定cookie

  5. Expires/Max-Age

    如果你想要cookie存在一段时间,那么你可以通过设置Expires属性为未来的一个时间节点,Expires这个是代表当前时间的,这个属性已经逐渐被我们下面这个主人公所取代——Max-Age Max-Age,是以秒为单位的,Max-Age为正数时,cookie会在Max-Age秒之后,被删除,当Max-Age为负数时,表示的是临时储存,不会生出cookie文件,只会存在浏览器内存中,且只会在打开的浏览器窗口或者子窗口有效,一旦浏览器关闭,cookie就会消失,当Max-Age为0时,又会发生什么呢,删除cookie,因为cookie机制本身没有设置删除cookie,失效的cookie会被浏览器自动从内存中删除,所以,它实现的就是让cookie失效。

  6. HTTP

    这个属性是面试的时候常考的,如果这个属性设置为true,就不能通过js脚本来获取cookie的值。

  7. size

    1、一个浏览器针对一个网站最多存20个Cookie,浏览器一般只允许存放300个Cookie

    2、每个Cookie的长度不能超过4KB(稀缺)。但不同的浏览器实现的不同

  8. secure

    这个属性译为安全,http不仅是无状态的,还是不安全的协议,容易被劫持,打个比方,你在手机端浏览网页的时候,有没有中国移动图标跳出来过,闲言少叙,当这个属性设置为true时,此cookie只会在https和ssl等安全协议下传输。

  9. same-site

参考:

http://www.cnblogs.com/xianyulaodi/p/6476991.html