当前位置：首页 > 编程日记 > 正文

JavaScript DOM之Cookie详解

编程日记 2024-01-25 21:52:10

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);

JavaScriptjavascript浏览器cookie

https://www.dkcj.cn/info/839.html

使用JavaScript实现复杂功能：一个完整的电商网站搜索功能

随着互联网的发展，电子商务网站已经成为人们购物的重要平台。而在这些网站中，搜索功能无疑是核心功能之一。用户可以通过搜索快速找到他们需要的商品，从而提高购物体验。本文将详细介绍如何使用JavaScript实现一个完整的电商网站搜索功能。

编程日记2024/01/27 08:54:23

说说你对 TypeScript 的理解？与 JavaScript 的区别？

超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用。如果缺乏声明而不能推断出类型，那么它的类型被视作默认的动态。等数据格式，对象的类型就是用接口来描述的。的语法，所以任何现有的。对于基本类型的批注是。

编程日记2024/01/24 10:38:58

elementPlust 的el-select在提示框关闭时自动弹出

主要问题就是因为filterable属性，根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件，下拉框出现/隐藏时触发。当el-select添加filterable属性时，弹提示窗时，点击确定后，下拉框会自动弹出。console.log('弹窗出select', item)增加了visible-change事件。el-select事件最后增加焦点取消。

编程日记2024/01/22 16:06:44

在react中说说对受控组件和非受控组件的理解？以及应用场景

这时候当我们在输入框输入内容时，会发现输入的内容无法显示出来，此时input标签是一个可读的状态，因为value被this.state.username所控制，当用户输入时，this.state.username不会自动更新，这样的话input的内容就不会发生变化了，想要解除被控制，可以为input标签设置onChange事件，触发的时候更新state，从而导致input框内容更新。简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。

编程日记2024/01/22 09:38:31

vue3 项目中 arguments 对象获取失败问题

在 vue3 项目中获取到的 arguments 对象与传入实参不符，打印出函数中的 arguments 对象如下...

编程日记2024/01/20 13:01:48

前端JS代码中Object类型数据的相关知识

遍历JavaScript中的对象有几种方法，包括使用for…in循环、Object.keys()方法、Object.values()方法和Object.entries()方法。因此前端传入了日期类型数据之后，如果和后台数据库中的数据类型不一致，比如数据库中的日期数据类型格式是。前端传入的Object对象中其中某个字段值是日期类型的数据，则在前端的类型就是一个。，则数据传往后端之前需要做格式类型转换。，它的值是一个中国标准时间，比如。

编程日记2024/01/19 23:04:05

深入解析JavaScript的原生原型

在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供的原生对象。这些原生对象同样基于原型继承机制,拥有自己的原型。理解原生对象的原型非常重要,可以让我们正确使用这些内置对象,也有助于进一步理解JavaScript的原型继承系统。本文将详细解析原生对象的原型结构,揭开一些常见原生对象原型的神秘面纱。学习原生对象的原型关系,有助于我们在日常开发中正确理解和使用这些JavaScript内置对象,避免一些常见陷阱。

编程日记2024/01/18 16:23:59

深入三目运算符：JavaScript、C++ 和 Python 比较

三目运算符是编程中常用的条件表达式，它允许我们根据条件选择不同的值。我们将通过具体的例子分别介绍 JavaScript、C++ 和 Python 中的三目运算符，以便更好地理解它们的用法和特性。JavaScript 示例// 例子: 根据条件选择不同的值var x = 10;var y = 20;"x 大于 y" : "x 不大于 y";在这个例子中，如果x大于y，则result的值为 “x 大于 y”，否则为 “x 不大于 y”。C++ 示例// 例子: 根据条件选择不同的值。

编程日记2024/01/18 13:21:33

深入解析JavaScript中new Function语法

Function是JavaScript中非常重要的内置构造函数,可以用来动态创建函数。new Function语法就是其中一种函数创建方式。但是new Function也有一定的缺点需要注意。本文将带您深入解析new Function语法,了解其应用场景以及需要注意的问题。new Function是动态创建函数的一种方式,但也有缺点。为了更好的代码质量和性能,应该慎用或避免使用。对JavaScript函数和作用域有深入理解,可以编写出更简洁、高效、稳定的代码。。

编程日记2024/01/16 16:31:44

javascript的变量存储机制和原理

js的变量存储机制

编程日记2024/01/16 00:41:12

将 RGB 转换为十六进制、生成随机十六进制

RGB是一种加法混色模式，它通过调节红、绿、蓝三个颜色通道的亮度来混合出各种颜色。对于每个颜色通道，取值范围是0到255，0表示该通道对应的颜色分量没有亮度，255表示达到最大亮度。

编程日记2024/01/15 09:48:26

nodemon（自动重启 node 应用程序）的安装与使用

(2).键入命令 set-ExecutionPolicy remoteSigned。windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略。全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。(4)、再运行 nodemon app.js ok。我们可以执行安装选项 -g 进行全局安装。1、安装，在随意一个命令窗口都可以。自动重启 node 应用程序。(3)、输入Y 或者 A。

编程日记2024/01/15 01:56:02

TypeScript基础知识：类型断言

语法，我们可以将一个值断言为特定类型或将联合类型的变量断言为其中一个类型。在实际开发中，合理使用类型断言可以提高代码的可读性和维护性。中，类型断言是一种强制将一个值视为特定类型的方式。它允许开发人员在编译时指定变量的类型，从而获得更好的类型检查和代码提示。类型断言是一种告诉编译器某个值的具体类型的方法。中的一项强大特性，它允许开发人员在编译时明确指定变量的类型，以获得更好的类型检查和代码提示。中的类型断言，并提供丰富的示例代码帮助读者更好地理解和应用这一特性。将一个联合类型的变量断言为其中一个类型。

编程日记2024/01/10 18:00:13

Vue学习计划-Vue3--核心语法（七）pinia

gitee。

编程日记2024/01/10 10:11:53

2024年，前端必会的console骚操作

调试。程序员们努力地避免的东西,只为在代码中制造更多的错误。编写无错误的代码是即使是最好的程序员也会觉得难以实现的。这就是为什么你应该总是调试代码。而调试JavaScript代码的最好方法之一就是了不起的。除此之外,还有更好的方法。这也正是本文的重点。告诉你与控制台交互的更好方法。在复杂的IDE中输入控制台会出现各种自动补全。在Visual Studio Code中输入console时的自动补全选项。与使用普通的不同,这里有一些更好的选择。使用这些使调试过程变得更加容易和快速。

编程日记2024/01/09 23:13:42

JavaScript中内置对象--数学对象

1、数学对象Math 2、日期对象new Date() 3、数组对象new Array 4、字符串对象new String()1、自定义对象（computer/car） 2、DOM对象（div/p） 3、BOM对象（window/console） 4、内置对象。

编程日记2024/01/08 17:36:56

html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

原生的html,加jQuery使用不习惯，新html页面导入vue3,element plus做界面，现在需要把日历上英文切成中文。elementplus, vue3对应的js都可以通过创建一个vue3项目找到对应的脚本导入）然后在node_modules对应目录的文件，把它拷贝到html项目即可。

编程日记2024/01/07 16:02:39

学习调整echarts中toolbox位置toolBox工具栏属性

编程日记2024/01/07 09:50:52

了解JavaScript中的基本类型值和引用类型值

/创建空对象并将其引用赋给变量avar b={};//创建空对象并将其引用赋给变量bvar c=[];//创建空数组并将其引用赋给变量c以上示例中，变量a和变量b都是指向了一个空对象，如果new Object()不传参数的话，那么用new Object()和{}来创建对象的效果是相同的。但是如果传入不同的参数，会有不同的效果。传入String 返回String，类似new String()传入Number 返回Number，类似new Number()

编程日记2024/01/04 17:54:41

vue3解决切换tab页每次切换加载数据导致数据缓慢问题

使用标识符来进行辨认有两个tab页搞个动态加载在开头的vedioload还没开始加载的时候判断是否加载过入股已经加载过则返回不要重新加载。由标签页的离线和在线数据都分开管理使用两个列表：即一个数组两个对象进行存储数组的下标有tab0 tab1 动态决定代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。

编程日记2024/01/04 10:11:23

vue写了这么久了你对slot的理解是什么？slot使用场景有哪些？

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中。子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件。插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用。父组件在使用的时候，直接在子组件的标签内写入内容即可。结构，当父组件使用的时候没有往插槽传入内容，标签内。第三个参数，父组件则能够得到子组件传递过来的值。

编程日记2024/01/01 23:44:32