1、cookie

cookie是纯文本,没有可执行代码,是指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端(浏览器)上的数据(通常经过加密)。当用户访问了某个网站的时候,我们就可以通过cookie在访问者电脑上存储数据,或者某些网站为了辨别用户身份、进行session 跟踪而将数据储存在用户本地终端上(通常经过加密)。

cookie 默认是临时存储的,当浏览器关闭进程的时候自动销毁。要想长时间保存一个cookie,就需要设置cookie的过期时间。当 Web 服务器创建了Cookies 后,只要在其有效期内,用户访问同一个 Web 服务器时,浏览器首先要检查本地的Cookies,并将其原样发送给 Web 服务器。cookie是能保持 Web 浏览状态的手段。

2、cookie的工作过程

当网页要发 http 请求时,浏览器会先检查是否有相应的 cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的,而且每一次http请求浏览器都会自动帮我们做。

存储在cookie中的数据,每次都会被浏览器自动放在http请求中。如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销。但如果这些数据是每个请求都需要发给服务端的数据(比如身份认证信息),浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息(最典型的就是身份认证信息)”就特别适合放在cookie中,其他类型的数据就不适合了。

工作过程:

(1)首先,我们假设当前域名下还是没有 Cookie 的

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

(3)服务器设置 Cookie 并发送给浏览器(当然也可以不设置)

(4)浏览器将 Cookie 保存下来

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

3、cookie的特征

(1)不同的浏览器存放的cookie位置不一样,也是不能通用的。

(2)cookie的存储是以域名形式进行区分的,在同一浏览器下不同的域名下存储的cookie是独立的。

(3)cookie也可以设置过期的时间,默认是会话结束的时候,当时间到期自动销毁

(4)一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个

(5)我们可以设置cookie生效的域(当前设置cookie所在域的子域),也就是说,我们能够操作的cookie是当前域以及当前域下的所有子域

(6)cookie 必须在 HTML 文件的内容输出之前设置。如果用户在浏览器上设置了禁止 Cookie,则 Cookie 不能建立。

4、cookie的设置

4.1、在客户端设置

  1. document.cookie = '名字=值';
  2. document.cookie = 'username=cfangxu;domain=baike.baidu.com' //并且设置了生效域

注意: 客户端可以设置cookie 的下列选项:expires、domain、path、secure(有条件:只有在https协议的网页中,客户端设置secure类型的 cookie 才能成功),但无法设置HttpOnly选项。

4.2、在服务器端设置

不管你是请求一个资源文件(如 html/js/css/图片),还是发送一个ajax请求,服务端都会返回response。而response header中有一项叫set-cookie,是服务端专门用来设置cookie的。

  1. //Set-Cookie 消息头是一个字符串,其格式如下(中括号中的部分是可选的):
  2. Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

注意: 一个set-Cookie字段只能设置一个cookie,当你要想设置多个 cookie,需要添加同样多的set-Cookie字段。 
服务端可以设置cookie 的所有选项:expires、domain、path、secure、HttpOnly。通过 Set-Cookie 指定的这些可选项只会在浏览器端使用,而不会被发送至服务器端。

5、cookie的域概念(domain)

domain 指定了 cookie 将要被发送至哪个或哪些域中。默认情况下,domain 会被设置为创建该 cookie 的页面所在的域名,所以当给相同域名发送请求时该 cookie 会被发送至服务器。浏览器会把 domain 的值与请求的域名做一个尾部比较(即从字符串的尾部开始比较),并将 domain 能匹配到域名的 cookie 发送至服务器。

(1)客户端设置

  1. document.cookie = "username=cfangxu;path=/;domain=qq.com"

上面将 domain 设置为 qq.com,表示访问域名尾部是 qq.com 的网站时浏览器都会将该 cookie 带上。path 值为 "/" 表示访问 qq.com 域名下的根目录下的都将能带上该 cookie

(2)服务端设置

  1. Set-Cookie: username=cfangxu;path=/;domain=qq.com
  2. // 注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。

6、cookie的路径概念

因为安全方面的考虑,默认情况下,只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问。但 path 属性可以为 cookie 指定路径,domain 和 path 加起来构成了URL,表示当浏览器在访问该 URL 下的网站或者 URL 带有这个前缀的网站时都将会带上该 cookie 。

(1)客户端设置

最常用的例子就是让 cookie 在根目录下,这样不管是哪个子页面创建的 cookie,该域名下的所有页面都可以访问到了。

  1. document.cookie = "username=cfangxu; path=/"

(2)服务器端设置

  1. Set-Cookie:name=cfangxu; path=/blog

如上设置:path 选项值会与 /blog,/blogrool 等等相匹配;任何以 /blog 开头的选项都是合法的。需要注意的是,只有在 domain 选项核实完毕之后才会对 path 属性进行比较。path 属性的默认值是发送 Set-Cookie 消息头所对应的 URL 中的 path 部分。

domain和path总结:

domain是域名,path是路径,两者加起来就构成了 URL,domain和path一起来限制 cookie 能被哪些 URL 访问。 所以domain和path两个选项共同决定了cookie何时被浏览器自动添加到请求头部中发送出去。如果没有设置这两个选项,则会使用默认值。domain的默认值为设置该cookie的网页所在的域名,path默认值为设置该cookie的网页所在的目录。

7、JavaScript操作cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

7,1、创建cookie

  1. document.cookie="username=John Doe";

添加过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除

  1. document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

添加浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

  1. document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

7.2、读取cookie

通过document.cookie来获取当前网站下的cookie的时候,得到的是字符串形式的值,它包含了当前网站下所有的cookie,这个方法只能获取非 HttpOnly 类型的cookie。它会把所有的cookie通过一个分号+空格的形式串联起来,例如:username=chenfangxu; job=coding

  1. var x = document.cookie;

7.3、修改 cookie

要想修改一个cookie,只需要重新赋值就行,旧的值会被新的值覆盖。但要注意一点,在设置新cookie时,path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值,而是添加了一个新的 cookie。

  1. document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

7.4、删除 cookie

把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项一定要旧cookie 保持一样。

  1. document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

前端开发本地存储之cookie的更多相关文章

  1. 前端开发本地存储之localStorage和sessionStorage

    1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...

  2. 前端之本地存储和jqueryUI

    本地存储 本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路 ...

  3. 本地存储之cookie、localStorage、sessionStorage

    一.本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有 ...

  4. 偏前端--之小白学习本地存储与cookie

    百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...

  5. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

  6. 本地存储(cookie&sessionStorage&localStorage)

    好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...

  7. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  8. 本地存储之cookie

    cookie概述: Cookie 在计算机中是个存储在浏览器目录中的文本文件,当浏览器运行时,存储在 RAM 中发挥作用 (此种 Cookies 称作 Session Cookies), 一旦用户从该 ...

  9. 客户端本地存储(cookie、web Storage、vuex)选择

    一.cookie .localStorage .sessionStorage .vuex 比较 cookie   4K    有时效性    可服务器传递 cookie是由服务器产生,存储在客户端的一 ...

随机推荐

  1. 用Vue来实现购物车功能(二)

    这个小demo具有添加商品进购物车 .增加购物车内商品的数量.减少购物车内商品的数量.计算一类商品的总价.以及计算所有商品的总价 首先看目录结构 因为我们的Tab.vue  Car.vue 以及Car ...

  2. Eclipse Java工程转为Web工程步骤

    找到工程的.project文件,在<natures>标签中增加以下两行配置:<nature>org.eclipse.wst.common.modulecore.ModuleCo ...

  3. ETCD分布式锁实现选主机制(Golang实现)

    ETCD分布式锁实现选主机制(Golang) 为什么要写这篇文章 做架构的时候,涉及到系统的一个功能,有一个服务必须在指定的节点执行,并且需要有个节点来做任务分发,想了半天,那就搞个主节点做这事呗,所 ...

  4. C# Thread3——前台线程后台线程

    默认情况下,显示创建的线程都是前台线程,进程会等待内部所有的前台线程执行完才会结束退出 1.默认创建的线程都是前台线程 2.进程会等待所有的前台线程执行完而结束,如果还存在后台线程则会强行中断并且退出 ...

  5. hbase的TTL机制清除opentsdb的超时数据

    我们发现用opentsdb向hbase写数据之后,磁盘占用率飙升得很快,我们存的业务数据只用保存一个月的即可,了解hbase的TTL机制可以清除相关表.相关行的超时数据,之前在数据备份时,我介绍了,o ...

  6. Python工具库(感谢backlion整理)

    漏洞及渗透练习平台: WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.co ...

  7. unity编辑器Hierarchy添加图标

    效果 素材 using UnityEditor; using UnityEngine; using System.Collections.Generic; [InitializeOnLoad] cla ...

  8. spring-data-elasticsearch使用出现的一些小问题

    问题一failed to load elasticsearch nodes : org.elasticsearch.index.mapper.MapperParsingException: No ty ...

  9. 怎么用 pytorch 查看 GPU 信息

    如果你用的 Keras 或者 TensorFlow, 请移步 怎么查看keras 或者 tensorflow 正在使用的GPU In [1]: import torch In [2]: torch.c ...

  10. 事件 on emit off 封装

    /* on 绑定 emit 触发 off 解绑 //存放事件 eventList = { key:val handle:[] } 1对多 on(eventName,callback); handle: ...