首页 > 编程语言 >JavaScript DOM之Cookie详解

JavaScript DOM之Cookie详解

时间:2024-01-27 20:31:57浏览次数:26  
标签:document DOM 过期 JavaScript cookie 设置 var Cookie endTime

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

标签:document,DOM,过期,JavaScript,cookie,设置,var,Cookie,endTime
From: https://blog.51cto.com/zhishunet/9445071

相关文章

  • JavaScript DOM对象的尺寸和位置详解
    在DOM对象操作中,其尺寸和位置也是DOM的核心内容,因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作,特别是js动画效果。一、关于DOM对象的尺寸和位置介绍DOM对象的尺寸和位置的属性DOM对象的属性描述obj.scrollWidth和obj.scrollHeightDOM对象的内部......
  • JavaScript DOM之Cookie详解
    cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。一、什么是cookie随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,......
  • 关于javascript的一些笔记(一)
    在script标签内使用import的时候,必须在script标签加上type=“module”当使用script标签加上type="module"的时候,是当所有模块都加载进来才进行工作的,也就是如果html在script标签下面也是可以正常运行的,他是后解析的当使用script标签加上type="module"的时候,script标签里面......
  • python之常用标准库-random
    1.randomdefrandom(self):"""Getthenextrandomnumberintherange[0.0,1.0)."""return(int.from_bytes(_urandom(7),'big')>>3)*RECIP_BPF翻译:获取0,1之间的随机浮点数1#!/usr/bin/python2importrandom3p......
  • javascript replaceall 正则表达式
    varstr="dogdogdog";varstr2=str.replace(/dog/g,"cat");console.log(str2);参考:https://www.jb51.net/article/23762.htm?tdsourcetag=s_pcqq_aiomsgstr="dogdogdog12";str=str.replace(newRegExp("[d]","g......
  • Cookie和Session的关系 - 通俗举例
    目录Cookie和Session的关系关系:工作流程简述:举例-商店购物定义:操作流程:Cookie和Session的关系Cookie和Session是在web开发中用于维护用户状态的两个关键概念。Cookie:定义:Cookie是在客户端(通常是浏览器)存储的小型文本文件,由服务器发送到客户端并存储在用户的计算......
  • 使用 JavaScript 宏删除文档中的特定注释
    有时只需要删除文档中的注释,要怎么快速做到呢?在这篇文章中,我们将会展示如何为ONLYOFFICE创建一个简单的宏,来删除某些特定的或所有评论,从而保持协作的重点和整洁。什么是ONLYOFFICE 宏如果您是一名资深MicrosoftExcel用户,那么相信您已对于VBA宏非常熟悉了。这些宏是帮助您自......
  • Cookie、Session 和 Token 有什么区别?
    Cookie、Session和Token通常都是用来保存用户登录信息的技术,但三者有很大的区别,简单来说Cookie适用于简单的状态管理,Session适用于需要保护用户敏感信息的场景,而Token适用于状态无关的身份验证和授权。具体来说,Cookie、Session和Token的区别主要有以下几点区别:存储......
  • html 中javascript 如何被调用
    在HTML中,JavaScript可以通过多种方式进行调用。1.内联脚本(InlineScript):直接将JavaScript代码写入到HTML文件的<script>标签中。示例代码如下所示:<!DOCTYPEhtml><html><head><title>使用内联脚本</title></head><body><!--HTML页面内容--><scripttyp......
  • SSAS 利用Adomd 编程实现Cube的自定义配置
    利用Adomd执行Cube数据库的配置。 需要下载:Microsoft.AnalysisServices.AdomdClient,安装,再搜索到DLL的位置,在程序里引用下载地址 环境:SqlServer2022表格模型脚本内容存放在:s01.json文件里AdomdConnectionconn=newAdomdConnection("DataSourc......