JavaScript DOM之Cookie详解

cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。

一、什么是cookie

随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,比如用户的账号,购物车存储的商品等,就需要用到cookie技术。

1、cookie简介

cookie最早是网景公司发明的,是一种跟踪用户会话的技术。可以理解为本地缓存,它由服务器生成,保存在用户本地浏览器上的小文本文件,它可以包含与用户相关的信息。
对于一个网站而言,有很多用户在访问,我们怎么区分每一个用户呢,HTTP协议是无状态协议,服务器单从网络连接上是无法区分每一个用户的,于是服务器就给浏览器发送cookie,浏览器会把这个cookie保存在本地,用户每次访问都会带上自己的cookie,服务器就能区分不同的用户了。
注意:如果用户端(浏览器)设置禁止cookie,那么cookie就不用建立了。

2、cookie的特点
2.1、大小限制

cookie是保存在本地的小文本文件,所以cookie对数据的大小进行了限制,一个浏览器cookie数量最多为300个,每个cookie的大小不能超过4kb,每个网站允许设置的cookie数量不超过20个。

2.2、不可跨域

每个网站在用户访问的时候都会带上自己的cookie,因为cookie具有不可跨域性,所以不能在不同的站点使用,cookie在客户端由浏览器来管理。

2.3、时效性

cookie可以设置生成时间,也就是过期时间。在这个时间内cookie都是有效的,超过这个时间cookie会被清楚,我们也可以手动清楚cookie。

2.4、不安全性

cookie从某种程度上来说已经严重危及用户的隐私和安全,它包含了一些敏感信息,比如用户名、计算机名等,尽管这些数据会经过加密,但还是有泄漏的风险。

3、cookie的用途
3.1、记录用户信息
3.2、永久登陆

二、如何操作cookie

1、查看cookie

浏览器上如何查看cookie:设置 - 隐私设置 - 内容设置 - 所有cookie和网站数据,通过这个我们可以看到cookie的相关信息,如:cookie的名字,内容,域,路径,是否允许脚本运行,创建时间和过期时间等
js查看:document.cookie

// 查看cookie设置成函数
function getCookie(key){
	var reg = new RegExp(key + '=([^;]*)'); // 正则表达式
	var arr = document.cookie.match(reg); // 获取正则匹配后的值
	if(!arr) return null;
	return unescape(arr[1]); // 转码并返回值
}
2、添加cookie
// 添加cookie使用的是document对象的cookie属性,既可以获取cookei也可以设置cookie
// 设置cookie
document.cookie = 'name=zhishuseo';
3、修改cookie
// 修改cookie其实就是重新设置cookie,我们把设置(修改)cookie封装成一个函数
function setCookie(key,value,time){
	var endTime = new Date();  // 创建时间对象
	// 计算过期时间戳
	endTime.setTime(endTime.getTime() + time*60*1000);
	var gmtTime = endTime.toGMTString(); //转换成格林尼治标准时间
	var value = escape(value); // 为支持中文进行ASCII转吗
	document.cookie = key + '=' + value + ';expires=' + gmtTime;
}

setCookie('city','北京',1);  // 调用函数设置cookie
4、删除cookie
// 删除cookie的原理就是把cookie的过期时间设置为0或者小于0
function delCookie(key){
	var endTime = new Date();
	endTime.settime(endTime.getTime() - 1);
	var gmt = endTime.toGMTString();
	document.cookie = key + '=null;expires=' + gmt; // 设置cookie
}
// 这里我们在计算时间的时候让当前时间减去1cookie就过期了,就会被删除。                                                                                                                        
5、设置cookie过期时间
// 在设置cookie的时候加上时间参数,就可以设置它的过期时间,这个时间必须是格林尼治标准时间。
// 设置过期时间
var minite = 30; // 30分钟
var endTime = new Date(); // 当前时间戳
// 过期时间戳,并转换成GMT时间格式
endTime.setTime(endTime.getTime() + minite*60*1000);
var gmt = endTime.setGMTString(); // 格林尼治标准时间
// 修改cookie并设置过期时间
document.cookie = 'name3=zhishuseo;expires=' + gmt;
// 显示cookie
console.log(document.cookie);

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第139期 做大还是做小-Oracle名称哪些事(20240125)

数据库管理139期 2024-01-25 第139期 做大还是做小-Oracle名称哪些事(20240125)1 问题2 排查3 扩展总结 第139期 做大还是做小-Oracle名称哪些事(20240125) 作者:胖头鱼的鱼缸(尹海文) Oracle A…

【C#】基础巩固

最近写代码的时候各种灵感勃发,有了灵感,就该实现了,可是,实现起来有些不流畅,总是有这样,那样的卡壳,总结下来发现了几个问题。 1、C#基础内容不是特别牢靠,理解的不到位&#xff…

2016年认证杯SPSSPRO杯数学建模B题(第一阶段)低分辨率下看世界全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 B题 低分辨率下看世界 原题再现: 数码摄像技术被广泛使用于多种场合中。有时由于客观条件的限制,拍摄设备只能在较低的分辨率下成像。为简单起见,我们只考虑单色成像。假设成像的分辨率为 32 64&#xff0c…

架构师之路(十四)计算机网络(网络层)

前置知识(了解):计算机基础。 作为架构师,我们所设计的系统很少为单机系统,因此有必要了解计算机和计算机之间是怎么联系的。局域网的集群和混合云的网络有啥区别。系统交互的时候网络会存在什么瓶颈。 网络层提供主机…

Dlearning

Deep Learning Basic 神经网络: #mermaid-svg-rR22a8Udy5SxGOoP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rR22a8Udy5SxGOoP .error-icon{fill:#552222;}#mermaid-svg-rR22a8Udy5SxGOoP .error-t…

线扫相机使用教程

一.线扫相机的采集原理 在现有的工业 2D 相机中,主要有两种类型的相机,面阵相机和线扫相机。这两种相机有其 各自的特点。 面阵相机:主要用于采集较小尺寸的产品,特别是长度方向较小的产品。其采集原理是通过 单次或多次曝光&…

Atlassian 停服 Bitbucket?三步快速迁移至极狐GitLab

之前的文章Jira 母公司全面停服 Server 产品,用户如何迁移至极狐GitLab提到了 Atlassian 将在 2 月 15 日以后停止对 Server 端产品的服务支持,此后用户将无法像之前一样继续使用 Jira、Bitbucket、Bamboo、Confluence 这些产品了。如果用户想要继续使用…

蓝牙----蓝牙消息传输_GATT服务发现

蓝牙消息传输_GATT服务发现 1.主机和从机GATT服务的发现2.通知的使用 1.主机和从机GATT服务的发现 GATT服务的发现由主机执行,一共三个阶段  1.处理交换 MTU 请求和响应,启动对 Simple Service 服务的发现。 if (discState BLE_DISC_STATE_MTU){// MT…

四川思维跳动商务信息咨询有限公司专注抖音电商服务

在当今这个数字化时代,电商服务已经成为企业发展的重要驱动力。四川思维跳动商务信息咨询有限公司作为一家专注于抖音电商服务的公司,以其卓越的服务质量和创新能力,成为了行业的领航者。 四川思维跳动商务信息咨询有限公司自成立以来&#x…

pyqt5+vscode 配置坑笔记

1.conda activate XX 时失败 这样出来的python版本也是错的(总是全局版本) 无法加载文件 D:\Documents\WindowsPowerShell\profile.ps1,因为在此系统上禁止运行脚本 系统设置允许执行脚本解决 无法加载文件WindowsPowerShell\profile.ps1…

leetcode hot100组合

在本题中,是要求返回[1,n]这个数组的长度为k的组合。涉及到排列、组合、棋盘、分割等问题的时候,要考虑利用回溯来进行解决。 回溯和递归类似,也分为三步进行分析 确定递归函数的返回值和参数:一般来说返回值都是void&#xff0c…

互斥锁/读写锁(Linux)

一、互斥锁 临界资源概念: 不能同时访问的资源,比如写文件,只能由一个线程写,同时写会写乱。 比如外设打印机,打印的时候只能由一个程序使用。 外设基本上都是不能共享的资源。 生活中比如卫生间,同一…

微软人工智能办公AI工具 Copilot Pro 11项 Copilot 功能

Copilot(曾用名 Bing Chat 和 Bing Chat Enterprise)在此期间成为了许多用户的日常AI伴侣,并在正式发布后将继续为用户提供AI驱动的网络聊天体验。 微软Copilot官方网址链接:Microsoft Copilot: 你的日常 AI 助手 Copilot详情&am…

香港web3盛会:Unisat确认参加Big Demo Day项目路演

本次“Big Demo Day”将于1月31日举办第十期,是由Zeepr 总冠名,Central Research、Techub News联合主办、数码港、852web3支持举行的大型线下活动。Big Demo Day集结了Web2和Web3行业精英聚焦香港市场。 Unisat确认参加 Big Demo Day 线下活动&#xff0…

14.java集合

文章目录 概念Collection 接口概念示例 Iterator 迭代器基本操作:并发修改异常增强循环遍历数组:遍历集合:遍历字符串:限制 list接口ListIteratorArrayList创建 ArrayList:添加元素:获取元素:修…

Java JVM类加载阶段 双亲委派模式

类加载阶段 加载 将类的字节码载入方法区中,内部采用 C 的 instanceKlass 描述 java 类,它的重要 field 有: _java_mirror 即 java 的类镜像,例如对 String 来说,就是 String.class,作用是把 klass 暴露…

WWDG喂狗

3F 是0111111 40 是1000000 0X7F 127 0X5F 95 127-9532 注意:中断是在0x40,在0x40喂狗则程序不会复位 在0x5F之前喂狗会复位,减小到63以下也会复位 在0x5F与0x3F之间喂狗会继续执行,不会复位 WWDG_HandleTypeDef WWDG_Handler; //窗口看门狗句柄//初始化窗口看门狗…

2024 高级前端面试题之 HTML 「精选篇」

该内容主要整理关于 HTML 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 HTML模块精选篇 1. 如何理解HTML语义化2. H5的新特性有哪些3. 说一下 HTML5 Drag API4. iframe有那些缺点5. 如何实现浏览器内多个标签页之间的通信6. 简述一下s…

EF core连接数据库的前期完整配置流程-开发环境搭建

EF core连接数据库完整流程-开发环境搭建 前置:.net6 core webapi不勾选任何配置 声明:这里是以两个配置类来做的,一个T_Books表,一个T_Person表 Book:创建属性及类型 BookConfig:对创建的进行属性数据表…

坚持刷题 | 平衡二叉树

文章目录 题目考察点代码实现实现总结对实现进一步改进扩展提问 坚持刷题,老年痴呆追不上我,今天继续二叉树:平衡二叉树 题目 110.平衡二叉树 考察点 递归能力: 能否使用递归来解决问题。树的基本操作:能否正确地访…