前端开发本地存储之cookie
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、在客户端设置
- document.cookie = '名字=值';
- 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的。
- //Set-Cookie 消息头是一个字符串,其格式如下(中括号中的部分是可选的):
- 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)客户端设置
- document.cookie = "username=cfangxu;path=/;domain=qq.com"
上面将 domain 设置为 qq.com,表示访问域名尾部是 qq.com 的网站时浏览器都会将该 cookie 带上。path 值为 "/" 表示访问 qq.com 域名下的根目录下的都将能带上该 cookie
(2)服务端设置
- Set-Cookie: username=cfangxu;path=/;domain=qq.com
- // 注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。
6、cookie的路径概念
因为安全方面的考虑,默认情况下,只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问。但 path 属性可以为 cookie 指定路径,domain 和 path 加起来构成了URL,表示当浏览器在访问该 URL 下的网站或者 URL 带有这个前缀的网站时都将会带上该 cookie 。
(1)客户端设置
最常用的例子就是让 cookie 在根目录下,这样不管是哪个子页面创建的 cookie,该域名下的所有页面都可以访问到了。
- document.cookie = "username=cfangxu; path=/"
(2)服务器端设置
- 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
- document.cookie="username=John Doe";
添加过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除
- document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
添加浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
- 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
- var x = document.cookie;
7.3、修改 cookie
要想修改一个cookie,只需要重新赋值就行,旧的值会被新的值覆盖。但要注意一点,在设置新cookie时,path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值,而是添加了一个新的 cookie。
- document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
7.4、删除 cookie
把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项一定要旧cookie 保持一样。
- document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
前端开发本地存储之cookie的更多相关文章
- 前端开发本地存储之localStorage和sessionStorage
1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...
- 前端之本地存储和jqueryUI
本地存储 本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路 ...
- 本地存储之cookie、localStorage、sessionStorage
一.本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有 ...
- 偏前端--之小白学习本地存储与cookie
百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...
- web前端实现本地存储
当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...
- 本地存储(cookie&sessionStorage&localStorage)
好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- 本地存储之cookie
cookie概述: Cookie 在计算机中是个存储在浏览器目录中的文本文件,当浏览器运行时,存储在 RAM 中发挥作用 (此种 Cookies 称作 Session Cookies), 一旦用户从该 ...
- 客户端本地存储(cookie、web Storage、vuex)选择
一.cookie .localStorage .sessionStorage .vuex 比较 cookie 4K 有时效性 可服务器传递 cookie是由服务器产生,存储在客户端的一 ...
随机推荐
- 用Vue来实现购物车功能(二)
这个小demo具有添加商品进购物车 .增加购物车内商品的数量.减少购物车内商品的数量.计算一类商品的总价.以及计算所有商品的总价 首先看目录结构 因为我们的Tab.vue Car.vue 以及Car ...
- Eclipse Java工程转为Web工程步骤
找到工程的.project文件,在<natures>标签中增加以下两行配置:<nature>org.eclipse.wst.common.modulecore.ModuleCo ...
- ETCD分布式锁实现选主机制(Golang实现)
ETCD分布式锁实现选主机制(Golang) 为什么要写这篇文章 做架构的时候,涉及到系统的一个功能,有一个服务必须在指定的节点执行,并且需要有个节点来做任务分发,想了半天,那就搞个主节点做这事呗,所 ...
- C# Thread3——前台线程后台线程
默认情况下,显示创建的线程都是前台线程,进程会等待内部所有的前台线程执行完才会结束退出 1.默认创建的线程都是前台线程 2.进程会等待所有的前台线程执行完而结束,如果还存在后台线程则会强行中断并且退出 ...
- hbase的TTL机制清除opentsdb的超时数据
我们发现用opentsdb向hbase写数据之后,磁盘占用率飙升得很快,我们存的业务数据只用保存一个月的即可,了解hbase的TTL机制可以清除相关表.相关行的超时数据,之前在数据备份时,我介绍了,o ...
- Python工具库(感谢backlion整理)
漏洞及渗透练习平台: WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.co ...
- unity编辑器Hierarchy添加图标
效果 素材 using UnityEditor; using UnityEngine; using System.Collections.Generic; [InitializeOnLoad] cla ...
- spring-data-elasticsearch使用出现的一些小问题
问题一failed to load elasticsearch nodes : org.elasticsearch.index.mapper.MapperParsingException: No ty ...
- 怎么用 pytorch 查看 GPU 信息
如果你用的 Keras 或者 TensorFlow, 请移步 怎么查看keras 或者 tensorflow 正在使用的GPU In [1]: import torch In [2]: torch.c ...
- 事件 on emit off 封装
/* on 绑定 emit 触发 off 解绑 //存放事件 eventList = { key:val handle:[] } 1对多 on(eventName,callback); handle: ...