一篇文章带你搞懂前端Cookie

news2024/11/16 9:27:21

文章目录

  • 一. 前言(一些废话)
  • 二. Cookie
      • 1. 为什么会有Cookie
      • 2. Cookie的特性
      • 3. 浏览器Cookie
      • 4. 跨站和跨域
  • 三. Cookie操作
      • 1. 获取Cookie
      • 2. 设置Cookie
      • 3. 修改Cookie
      • 4. 删除Cookie
  • 四. Cookie属性
      • 1. Cookie属性Domain
      • 2. Cookie属性path
      • 3. Cookie属性expires
      • 4. Cookie属性max-age
      • 5. Cookie属性httponly
      • 5. Cookie属性secure
      • 6. Cookie属性samesite
  • 五. 结尾

一. 前言(一些废话)

浏览器Cookie相信各位点进这篇文章的小伙伴应该不陌生了，它是前端领域中一个非常重要的内容，当然也是面试的一个考点，不知道各位小伙伴是否真正掌握了Cookie呢?当然没有掌握也是没有关系的，可以跟着小编的脚步一起来学习一下前端Cookie，没有熟练掌握的小伙伴看完这篇文章可能会对浏览器Cookie有一个新的认知。

PS:我这里讲的是前端Cookie并非后端领域的Cookie如果点赞够多可以考虑写一篇后端的。

二. Cookie

1. 为什么会有Cookie

web应用程序是使用HTTP协议传输数据的，然而HTTP协议是无状态的协议，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
你可能会有这样的经历，登录一个网站的时候会提醒你要不要记住账户和密码，这样下次来你就不用再次输入账号和密码了。这就是cookie的作用，当我们再次访问的时候，方便服务器直接根据我们的Cookie来直接取上一次去过的东西（对于，每一个cookie服务器会对这个cookie存储上一次我们拿过的数据，下一次对于同一个cookie的时候，就直接在这里取。

2. Cookie的特性

当服务器收到 HTTP 请求时，服务器可以在响应头里设置一个 Set-cookie 选项，浏览器接收到响应后会自动保存下 Cookie，之后浏览器对该服务器的每一次请求中都会通过请求头把 Cookie 信息发送给服务器，这就是Cookie的来源。
当然Cookie在浏览器中也是有个数和大小的限制，大小一般是4k，个数的问题每种浏览器的限制都不同，可以参考下面的表格。

FFChromeSafariOperaIE7.0/8.0
Cookie个数每个域为50个每个域为53个没有个数限制每个域名为30个每个域名为50个
Cookie大小4097个字节4097个字节4097个字节4096个字节4095个字节

值得注意的是:Cookie存储信息不安全（不能存放重要的信息）,Cookie中有域（domain）和路径的概念,浏览器是一个比较安全的环境，所以不同的域之间不能直接访问（js的同源策略限制）
PS:但是因为浏览器的每次请求都会携带上 Cookie，会带来额外的开销，而且存储量比较小，所以后来浏览器推出了新的 Api(web stoeage Api和 indexedDb)

3. 浏览器Cookie

打开浏览器的开发者工具 都可以在【应用】选项卡中看到当前浏览器所存储的Cookie，如下图。
在这里插入图片描述
其中字段名含义:

  • Name：cookie的名字(键)
  • Value：cookie存放的值
  • Expires：指cookie过期的时间（该时间为世界时间 UTC时间）也称为格林威治时间
  • Max-Age: 指cookie最大的存活有效期（单位：秒）
  • Domain: 指的是cookie当前的域
  • Path:指cookie当前的路径
  • Size: 指cookie存放的大小
  • Secure: 指cooke的安全属性

4. 跨站和跨域

跨站和跨域，是了解Cookie的必备知识

定义示例
跨域两个 URL 的“协议+主机名+端口”3者只要有一个不一致就是跨域http://www.taobao.com/和https://www.taobao.com/
跨站两个 URL 的 eTLD+1 不相同a.github.io 和 b.github.io
eTLDeffective top level domain （有效顶级域名）.com、.co.uk、.github.io
eTLD+1有效顶级域名+二级域名taobao.com

所以只要顶级域名和二级域名一样就是同站
在这里插入图片描述
再举两个例子 a.com 于 b.com 就属于跨站了，而 a.a.com 与 b.a.com 则是属与同站，因为二级域名和顶级域名相同，关于跨域详细的讲解就不在这里展开了，点赞多的话小编可以考虑后面写一篇相关文章。

三. Cookie操作

1. 获取Cookie

可以在浏览器控制台输入 document.cookie 就可以获取到当前所在网站标记存储的部分Cookie信息。
获取到的是一串字符串，序列化方式是: k1=v1;k2=v2;k3=v3
在这里插入图片描述
为什么说获取到的只是部分的Cookie，因为只要HttpOnly打钩的js是无法获取和操作的，这种Cookie是只能由服务端和浏览器来操作，通常这种Cookie是用来存储一些用户身份信息或者安全相关的凭证的
在这里插入图片描述
可以使用下面的代码将Cookie储存到一个对象中

function deal(){ var cookie = document.cookie;
var arr = cookie.split('; ');//注意是 分号空格
var obj = {};
    arr.forEach(function(item){
       var itemArr = item.split('=');
       obj[itemArr[0]] = itemArr[1];
})
    return obj;
}

2. 设置Cookie

在浏览器中设置Cookie也是通过 document.cookie 来操作的，以键值对的方式向浏览器存储Cookie
在这里插入图片描述
可以看到已经设置成功了
在这里插入图片描述

3. 修改Cookie

变更修改已经存储于浏览器的Cookie也很简单还是使用document.cookie 来操作只要将相同key的值重新赋值一遍就相当以修改了已经存储完成的Cookie值
在这里插入图片描述
可以看到更新成功
在这里插入图片描述

4. 删除Cookie

删除Cookie的值也很简单，还是使用document.cookie 来操作只需要将要删除的Cookie对应的键置空，然后再加上max-age的值为-1
在这里插入图片描述
执行完成后这条Cookie就消失了

四. Cookie属性

1. Cookie属性Domain

Domain是用来设置Cookie能够作用到的主机地址，存储在浏览器时不携带协议和端口。因为端口和协议不同并不会影响Cookie但是Cookie的部分属性只有在Https下才能有效，这也是Cookie的特性之一，不区分协议和端口。
如果前面有个. 如下 .baidu.con 就证明当前的Cookie可以作用于当前域及其子域，假如下面的Cookie在 niuma.baidu.com 中是可以访问到的 而前面没有这个.的Cookie在 niuma.baidu.com 中无法访问到 只能在baidu.com 中访问到。
在这里插入图片描述
在设置Cookie时如果没有设置Domain属性那么这个Cookie只能作用于当前域
有一个注意的点就是设置Cookie时设置了domain属性向下面
在这里插入图片描述
在浏览器存储Cookie的地方竟然变成了 .uicool123.com ??? 这是值得大家注意的地方
在这里插入图片描述
设置domain=.uicool123.com 的时候还是跟上面的情况一样，也就是说两种doamin属性的设置方法是一样的。
关于domain还有最后一点值得注意，就是在子域中可以给父域设置Cookie
比如我们在 niu.uicool123.com 中设置Cookie ，doamin属性设置为 .uicool123.com 那么我们可以在 uicool123.com 中获取到这个Cookie也可以在 hhh.uicool123.com 中获取到这个Cookie 因为这个Cookie是作用于uicool123.com和它的子域的。
但是我们不能在当前域的子域或者跨域设置Cookie，比如我们在 uicool123.com 的控制台设置 Cookie时domain属性不能设置为 hhh.uicool123.com 或者 baidu.com

2. Cookie属性path

Cookie的path用来指定URL的路径
在这里插入图片描述
假如我们在a.com/a的控制台设置如下的Cookie

document.cookie='myname=牛马;path=/a'

那么只要前缀是 a.com/a 的路径下都可以访问到这个Cookie 比如 a.com/a/b/c a.com/a/b
而在前缀不是a.com/a 的路径下是无法访问这个Cookie的 比如 a.com/b a.com/b/a
这个属性用的比较少，一般都是设置为/路径

3. Cookie属性expires

expires 属性是来设置Cookie有效期相关的属性，expires 指定Cookie失效的具体时间
注意: 当与max-age属性同时存在时max-age的优先级会更高
在这里插入图片描述
列如设置一个 2022年11月26日凌晨1点10过期的Cookie

document.cookie=`myname=牛马;expires=${new Date('2022-11-26 01:10:00').toUTCString()}`

在这里插入图片描述
可以看到已经设置好了
在这里插入图片描述
这个expires属性也可以设置为过去的时间,生效后浏览器会立即删除这条Cookie
当一个Cookie既不包含expires也不包含max-age属性那么，这个Cookie就是一个会话Cookie，当你关闭浏览器时这个Cookie会被自动删除，刷新和关闭当前页面是不会删除的。

4. Cookie属性max-age

max-age 属性也是用来设置CooKie有效期相关的属性，max-age 指定Cookie多少秒后失效
在这里插入图片描述
比如我们设置一个600秒后过期的Cookie

document.cookie=`myname=牛马;max-age=600`

在这里插入图片描述
可以看到设置成功
在这里插入图片描述
注意:当expires 和 max-age属性都设置时max-age的设置会优先，如果max-age设置为负值那就是删除Cookie
当一个Cookie既不包含expires也不包含max-age属性那么，这个Cookie就是一个会话Cookie，当你关闭浏览器时这个Cookie会被自动删除，刷新和关闭当前页面是不会删除的。

5. Cookie属性httponly

httponly 是和Cookie安全性紧密相关的一个Cookie，上面也有提及到。
只要HttpOnly打钩的js是无法获取和操作的，这种Cookie是只能由服务端和浏览器来操作，通常这种Cookie是用来存储一些用户身份信息或者安全相关的凭证的。
在这里插入图片描述
这种Cookie只能通过服务端响应设置
在这里插入图片描述
在浏览器设置这个属性的Cookie时这个Cookie会被浏览器直接忽略掉
在这里插入图片描述

5. Cookie属性secure

secure 这个属性用来告诉浏览器这个Cookie只能用https协议传输，如果服务端的响应中包含有secure属性的Cookie，但是当前的协议是http的，那么浏览器会直接忽略这个Cookie
当我们在浏览器创建了一个带有secure的属性
在这里插入图片描述
那么当我们向https://a.com 发起请求时就会携带上这个Cookie
而当我们请求http://a.com时的时候是不会携带这个Cookie的

6. Cookie属性samesite

关于samesite这是一个变动比较大的属性，samesite属性可以限制跨站请求时Cookie发送，samesite的值有三个

samesite属性值作用
None不论是否跨站都发送Cookie
Lax部分跨站请求情况下发送Cookie(默认值)
Strict跨站不发送Cookie

在这里插入图片描述
关于samesite属性为None的Cookie，虽然约束性最弱但是只有这个cookie是HTTPS协议进行传输的时候浏览器才认为它是有效的另外这个cookie.必须要添加secure属性，否则无法保存。
我们可以创建4个Cookie
在这里插入图片描述
在这里插入图片描述
可以看到在没有设置samesite属性时浏览器并不会自动添加lax。
当请求同域地址时这4个Cookie都会带上
注意:samesite只有在跨站请求的时候才会起作用

五. 结尾

最后还有几个不怎么常用的Cookie属性小编就不细说了，感兴趣的小伙伴可以自行查找相关文章，如果文章有错误的地方各位读者朋友可以在评论区指出，感谢大家的阅读。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/30545.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据_数据中台_数据分层

大数据_数据中台_数据分层

目录 分层总览 ODS:操作数据层 DIM:维度数据层 DWD:明细数据层 DWS:汇总数据层 ADS:数据应用层 CDM:公共数据层 数据层级调用原则 分层总览 ODS:操作数据层 ODS(Operate Data Store）,ODS层数据是数据仓库的第一层数据，是业务数据库的原始数据的复…
阅读更多...
Oracle Primavera Unifier uDesigner 资产管理器(Asset Manager )

Oracle Primavera Unifier uDesigner 资产管理器(Asset Manager )

目录 前言 特点 优势 维护管理 独立或集成 事务管理 资产组合管理 投资组合管理能力 可持续性和能源管理 单一集成设施和资产生命周期管理 移动应用 前言 Oracle Primavera Unifier 为组织提供设施管理的行业最佳实践解决方案。从设计、构建、运行和维护&#xff0…
阅读更多...
【深入理解Kotlin协程】Google的工程师们是这样理解Flow的？

【深入理解Kotlin协程】Google的工程师们是这样理解Flow的？

Question：why there is a Flow in kotlin? 问这个问题就好比在问为什么那里会有一座山存在，嗯，这貌似是一个哲学问题。当然，对于kotlin中的Flow的理解可能不会上升到这么高的哲学层次，对于Flow相关的Api掌握并使用它…
阅读更多...
JavaSE笔记——多态

JavaSE笔记——多态

文章目录前言一、向上转型回顾1.忘掉对象类型二、转机1.方法调用绑定2.产生正确的行为3.可扩展性三、构造器和多态1.构造器调用顺序2.构造器内部多态方法的行为四、协变返回类型总结前言 本文是学习Java编程思想记录的笔记，主要内容介绍在 Java 中多态的概念。 多…
阅读更多...
Servlet API(HttpSerrvlet+HttpServletRequest+HttpServletResponse)

Servlet API(HttpSerrvlet+HttpServletRequest+HttpServletResponse)

目录 🐲 1. HttpServlet 🐲 2. HttpServletRequest HTTP请求 🦄 2.1 打印请求信息(创建 ShowRequest 类) 🦄 2.2 获取 GET 请求中的参数(创建 GetParameter 类) 🦄 2.3 获取 POST 请求中的参数(创建 PostParame…
阅读更多...
java学习day57（Spring Cloud）Spring Cloud 微服务

java学习day57（Spring Cloud）Spring Cloud 微服务

主要课程内容 第⼀部分：微服务架构 互联网应用架构演进 微服务架构的体现思想及优缺点 微服务架构的核心概念 第⼆部分：SpringCloud概述 Sping Cloud 是什么 Sping Cloud 解决什么问题 Sping Cloud 架构 第三部分：案例准备 第四部分&#xff…
阅读更多...
2022华为杯研究生数学建模竞赛DS数模选题建议

2022华为杯研究生数学建模竞赛DS数模选题建议

2022华为杯研究生数学建模竞赛DS数模选题建议 开放性：F>E>AD>BC. 难度：AD>BC>EF （仅C君个人看法） A题 移动场景超分辨定位问题 此题是物理cv类题目，属于比较新颖的超分辨率图像检测类任务&#xff0c…
阅读更多...
1、Java的json得到我们想要的数据结构

1、Java的json得到我们想要的数据结构

Java的json得到我们想要的数据结构 第一步：首先我们要知道json就两种数据结构。 ！！！第一种数据结构：对象用{ }表示 ！！！第二种数据结构：数组用[ ]表示 我们用这个案例来…
阅读更多...
在智能家居领域产品中常用芯片

在智能家居领域产品中常用芯片

芯片是当前“电子科技设备的灵魂”所在，几乎决定了所有电子设备的综合性能，现如今智能家居带来了全新的使用场景与交互方式，从扫地机器人、智能洗碗机、智能冰箱等智能机器，到智能照明、智能感知、网络通讯、家庭影音等智能系统&a…
阅读更多...
H264基础知识入门

H264基础知识入门

之前视频基础，有讲到视频的原始数据YUV，相比RBG，数据确实减少了，但还是一个非常大数据量，会占用很大空间以及在给网络传输带来很大压力。所以必须要对视频进行压缩，减少占用空间。这里主要分享H264编码技术…
阅读更多...
数字IC设计之——低功耗设计

数字IC设计之——低功耗设计

目录 概述 背景 为什么需要低功耗设计 CMOS IC功耗分析 基本概念 功耗的分类 功耗相关构成 不同层次低功耗设计方法 芯片中的功耗分布以及对应的低功耗方案 低功耗方案 系统算法级的低功耗技术 编码阶段的低功耗技术 门控时钟 Clock Gating 物理实施的低功耗技术 操作数分离&am…
阅读更多...
【第六部分 | JavaScript高级】1：面向对象

【第六部分 | JavaScript高级】1：面向对象

目录 【第一章】面向对象 | Class创建、构造函数、方法 | Class继承 | 三个注意点 | 静态成员 | 原型对象 __ _proto___ | 类的本质 【第一章】面向对象 | Class创建、构造函数、方法 创建类 class name {// class body }var xx new name() 构造函数 class Person {co…
阅读更多...
【Godot】数据响应的方式执行功能

【Godot】数据响应的方式执行功能

Godot Engine 版本：4.0 beta 6 下载地址：Index of /godotengine/4.0/beta6/ (downloads.tuxfamily.org) 在这个教程中，学会理解以数据为主的进行处理执行逻辑的代码编写方式，虽然看似简单，但是确是方便又好用。 以及下…
阅读更多...
Git使用教程

Git使用教程

Git项目的三个工作区域的概念： 1、Git仓库Git 仓库目录是 Git 用来保存项目的元数据和对象数据库的地方。 这是 Git 中最重要的部分，从其它计算机克隆仓库时，拷贝的就是这里的数据。 2、工作目录工作目录是对项目的某个版本独立提取出来的内容…
阅读更多...
Ansible之 AWX 创建管理项目的一些笔记

Ansible之 AWX 创建管理项目的一些笔记

写在前面 分享一些 AWX 创建管理项目的笔记博文内容涉及： 容器化 AWX 手工创建项目Demo通过 SCM 创建项目 Demo项目角色，更新策略介绍，SCM 凭据的创建 食用方式： 需要了解 Ansible理解不足小伙伴帮忙指正 傍晚时分，你坐…
阅读更多...
ssm项目改造spring boot项目

ssm项目改造spring boot项目

快速创建 Spring Boot 项目 添加依赖 如果是普通 Maven 项目&#xff0c;需要手动添加。 <!-- 打包方式 jar 包 --> <packaging>jar</packaging><!-- 指定父工程 --> <parent><groupId>org.springframework.boot</groupId><ar…
阅读更多...
操作系统学习笔记（Ⅰ）：概述

操作系统学习笔记（Ⅰ）：概述

目录 1 操作系统概念 1.1 定义 1.2 功能 1.系统资源的管理者 2.用户和计算机硬件间接口 3.最接近硬件的层次 2 操作系统的特征 2.1 并发 2.2 共享 2.3 虚拟 2.4 异步 3 发展和分类 3.1 手工操作阶段 3.2 批处理阶段 1.单道批处理阶段 2.多道批处理系统 3.3 分…
阅读更多...
启明欣欣STM32开发板闪烁LED实验

启明欣欣STM32开发板闪烁LED实验

最近在咸鱼上买了一块启明欣欣的STM32板子&#xff0c;准备在上面测试open62541和CANopen&#xff0c;到货后如下图&#xff0c; 找商家要了资料&#xff0c;然后运行一个LED灯的实验来简单测试下板子&#xff0c;本文记录一下这个过程。 一 准备 安装Keil 5.35&#xff0c;安…
阅读更多...
【selection】 学习光标API并实现编辑区插入表情图片的功能

【selection】 学习光标API并实现编辑区插入表情图片的功能

目录场景介绍selection介绍selection APIrange 介绍range API实现编辑区插入表情图片参考资料场景介绍 在写web版聊天器时&#xff0c;遇到一个需求&#xff1a; 聊天时用户可以在编辑区加入表情图片&#xff0c;并且表情图片要插入在光标位置。// *web版聊天器地址&#xff…
阅读更多...
useMemo 使用误区

useMemo 使用误区

文章の目录问题背景useMemo 使用前后组件性能对比结论问题背景 在某一个h5项目中&#xff0c;使用了 useMemo 对项目中的组件进行优化&#xff0c;减少组件不必要的re-render, 优化后的结果&#xff1a; 在组件的props和状态未改变时&#xff0c;组件不再进行 re-render 表面上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023