当前位置: 首页 > news >正文

JavaScript--Cookie

什么是 Cookie?

在JavaScript中,cookie是一种小型的文本文件,它存储在用户的计算机上。通过使用cookie,网站可以向用户的浏览器发送数据,并将该数据保留在浏览器中,使网站能够在不同页面之间传递数据或存储用户偏好设置,以便在后续访问中进行读取和使用。

创建Cookie:

要创建一个cookie,可以使用document.cookie属性进行设置。document.cookie是一个字符串,其中包含当前与网站相关联的所有cookie。要创建一个名为cookieName的cookie,其值为cookieValue,可以使用以下语法:

document.cookie = "cookieName=cookieValue";

此时,cookie将被存储在浏览器中。 

设置过期时间:

可以通过为cookie添加expires属性来设置cookie的过期时间。例如,如果要将cookie的过期时间设置为2023年12月31日23:59:59 UTC,可以这样写:

document.cookie = "cookieName=cookieValue; expires=Thu, 31 Dec 2023 23:59:59 UTC";

当达到过期时间时,浏览器将自动删除该cookie。 

指定路径:

可以通过为cookie添加path属性来指定cookie的可访问路径。默认情况下,cookie只能在创建它的页面及其子目录中访问。如果要使cookie在整个网站范围内都可访问,可以将path设置为根目录:

document.cookie = "cookieName=cookieValue; path=/";

读取Cookie:

要读取cookie的值,可以使用document.cookie来获取当前与网站相关联的所有cookie。通常,cookie值将存储在一个字符串中。为了提取特定cookie的值,可以使用正则表达式或其他字符串处理方法。下面是一个示例,展示如何获取名为cookieName的cookie值:

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)cookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1");

这将从document.cookie字符串中提取名为cookieName的cookie的值,并将其存储在变量cookieValue中。 

删除Cookie:

要删除cookie,可以通过将过期时间设置为过去的时间来使其过期,从而让浏览器自动删除cookie。例如,要删除名为cookieName的cookie,可以执行以下操作:

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

这将将cookie的过期时间设置为过去的时间,使其立即过期并被删除。

注意:

需要注意的是,JavaScript Cookie有一些限制。浏览器对cookie的数量和大小都有限制。此外,由于安全原因,浏览器还实施了跨域设置,限制网站在不同域之间访问cookie。更复杂的操作和cookie设置可以使用第三方库来简化处理,例如js-cookie等。

示例代码:

<!DOCTYPE html>
<html>
<head><title>Cookie操作示例页面</title>
</head>
<body><h1>Cookie操作示例页面</h1><!-- 创建Cookie按钮 --><button id="createBtn">创建Cookie</button><!-- 读取Cookie按钮 --><button id="readBtn">读取Cookie</button><!-- 修改Cookie按钮 --><button id="updateBtn">修改Cookie</button><!-- 设置Cookie过期时间按钮 --><button id="expireBtn">设置过期时间</button><!-- 删除Cookie按钮 --><button id="deleteBtn">删除Cookie</button><!-- JavaScript代码 --><script>// 创建Cookie按钮点击事件处理函数document.getElementById("createBtn").addEventListener("click", function() {document.cookie = "myCookie=Hello World";alert("已创建Cookie");});// 读取Cookie按钮点击事件处理函数document.getElementById("readBtn").addEventListener("click", function() {var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");alert("Cookie的值为:" + cookieValue);});// 修改Cookie按钮点击事件处理函数document.getElementById("updateBtn").addEventListener("click", function() {document.cookie = "myCookie=How are you?";alert("已修改Cookie");});// 设置Cookie过期时间按钮点击事件处理函数document.getElementById("expireBtn").addEventListener("click", function() {var expirationDate = new Date();expirationDate.setFullYear(2023);expirationDate.setMonth(11); // 月份从0开始,11代表12月expirationDate.setDate(31);document.cookie = "myCookie=How are you?; expires=" + expirationDate.toUTCString();alert("已设置Cookie过期时间为2023年12月31日");});// 删除Cookie按钮点击事件处理函数document.getElementById("deleteBtn").addEventListener("click", function() {document.cookie = "myCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC";alert("已删除Cookie");});</script>
</body>
</html>

以上是一个包含创建、读取、修改、设置过期时间和删除Cookie的示例HTML页面。每个按钮都有一个唯一的id,并通过JavaScript代码绑定了对应的点击事件处理函数。点击不同的按钮会执行相应的操作,并弹出提示框显示相关信息。

相关文章:

JavaScript--Cookie

什么是 Cookie&#xff1f; 在JavaScript中&#xff0c;cookie是一种小型的文本文件&#xff0c;它存储在用户的计算机上。通过使用cookie&#xff0c;网站可以向用户的浏览器发送数据&#xff0c;并将该数据保留在浏览器中&#xff0c;使网站能够在不同页面之间传递数据或存储…...

【单片机】晨启科技,酷黑版,简易电压采集装置

简易电压采集装置&#xff08;限MSP430、STM32单片机&#xff09; 任务要求&#xff1a; 设计制作一个简易电压采集与显示装置&#xff0c;实现如下基本功能&#xff1a; 评分细则&#xff1a; 1.通过单片机内部ADC模块采集1路电压并通过OLED屏显示电压大小&#xff1b;&#x…...

任务12、Quality指令加持,Midjourney生成电影级数码作品

12.1 任务概述 本次实验任务旨在帮助你掌握Midjourney AI绘画中的Quality指令。通过深入介绍Quality指令的概念和作用,我们将解释为什么它在绘画中至关重要。通过测试不同的Quality参数对绘画效果的影响,并提供实战演示,你将学会如何在Midjourney中设置Quality参数以达到更…...

第4章 字符串和格式化输入/输出

本章介绍以下内容&#xff1a; 函数&#xff1a;strlen() 关键字&#xff1a;const 字符串 如何创建、存储字符串 如何使用strlen()函数获取字符串的长度 用C预处理器指令#define和ANSIC的const修饰符创建符号常量 本章重点介绍输入和输出。与程序交互和使用字符串可以编写个性…...

嵌入式开发学习(STC51-7-矩阵按键)

内容 按下S1-S16键&#xff0c;对应数码管最左边显示0-F 矩阵按键简介 独立按键与单片机连接时&#xff0c;每一个按键都需要单片机的一个I/O 口&#xff0c;若某单片机系统需较多按键&#xff0c;如果用独立按键便会占用过多的I/O口资源&#xff1b;而单片机 系统中I/O口资…...

WMS仓储管理系统的价值从哪些方面体现

仓库管理在不断改善&#xff0c;采用信息化来管理仓库。自从使用了WMS仓储管理系统解决方案后&#xff0c;仓库管理的效率大大提高了&#xff0c;而且WMS系统有很多价值。 首先&#xff0c;WMS系统可以帮助员工更省时省力地完成仓库管理工作&#xff0c;提高效率和准确性。传统…...

网站推荐第二期-沉浸式网页翻译

通过在浏览器上安装插件形式实现&#xff0c;接入多方翻译接口&#xff0c;实现全平台翻译功能&#xff0c;甚至可以使用openai的chatgpt&#xff0c;效率倍增。 不仅可以双语阅读网页&#xff0c;甚至pdf也支持翻译。 推荐网址如下&#xff1a; 双语网页翻译 - 电子书翻译 …...

【独立后台】快递小程序便宜寄快递系统小程序 对接易达

快递代发项目简介&#xff1a; 顾名思义就是帮发快递。原本产业链是客户-快递之间的联系&#xff0c;现在变成了客户-我们-快递&#xff0c;简单来说就是我们把客户聚集到一起团购到了更优惠的价格。很简单就是赚一个差价&#xff0c; 单子多就能和各个快递合作的平台&#x…...

【JVM】垃圾回收 ——自问自答2

Q: System.gc() 的理解 System.gc()底层调用的是 Runtime.getRuntime.gc(),会现实出发FullGC。 但是&#xff0c;它的调用附带一个免责声明&#xff0c;无法保证对垃圾收集器的调用。 Q&#xff1a; 内存溢出和内存泄漏&#xff1f; 内存溢出&#xff1a; 简而言之&#xf…...

MySQL数据库数据类型

MySQL数据库数据类型分类 在MySQL数据库中&#xff0c;MySQL数据类型分有四大类&#xff1a;数值类型、文本/二进制类型、时间日期和String类型。以下是这四大类的具体类型&#xff1a; 数值类型 数值类型的范围和字节大小&#xff1a; tinyint类型 tinyint类型只有一个字节…...

【力扣】27. 移除元素 <快慢指针、首尾指针>

【力扣】27. 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;必须仅使用 O(1) 额外空间并原地修改输入数组。元素的顺序可以改变。你不需要考虑数组中超…...

【每日一题】—— C. Challenging Cliffs(Codeforces Round 726 (Div. 2))

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…...

想在金融界拥有一席之地吗—社科院杜兰大学金融管理硕士助你圆梦

追求高学历是为了什么&#xff1f;一纸证书吗&#xff1f;显然并非如此&#xff0c;只有读过研的人才有话语权。在上升一个平台后&#xff0c;你必然会发现&#xff0c;更高学历得到的不止是一张文凭。而是更大的平台、更广阔的视野、更包容的环境&#xff0c;更多样的文化。最…...

Moonbeam与Nodle网络集成,增添物联网功能

领先的波卡跨链互连开发平台Moonbeam近期宣布与Nodle Network达成XCM集成&#xff0c;将NODL Token带到Moonbeam生态之中。本次集成将会开启波卡中Moonbeam和Nodle网络以及通过Moonbeam互连合约相连的远程链之间的流动性。 Nodle网络是一个为物联网&#xff08;Internet of Th…...

关于docker 在ubuntu16.04 上的安装

https://www.sohu.com/a/708313241_121368355 参考教程&#xff1a; https://www.runoob.com/docker/docker-image-usage.html 镜像网址 https://hub.docker.com/...

Cmder启动加速

Cmder是一个比较好用的命令行工具&#xff0c;可以通过修改默认Git地址提高启动速度&#xff1a; 打开vendor/init.bat添加本机Git地址&#xff0c;并且打开启动时间显示 :: Use /v command line arg or set to > 0 for verbose output to aid in debugging. set GIT_INSTA…...

【windows】windows上如何使用linux命令?

前言 windows上的bat命令感觉不方便&#xff0c;想在windows上使用linux命令。 有人提供了轮子&#xff0c;本文简单介绍一些该轮子的安装与使用&#xff0c;希望能够帮助到和我有一起需求的网友。 我的答案是busybox。 1.安装busybox.exe 在这个网站上安装busybox busyb…...

Docker Compose: 集合管理Docker的工具安装

Docker Compose:集合管理多个Docker容器的工具&#xff0c;在安装docker时windows,macos默认安装Docker Compose&#xff0c;linux需要自己手动安装 去官网https://github.com/docker/compose/releases下载需要的版本$ sudo chmod x ./docker-compose-linux-x86_64$ sudo cp .…...

Jmeter(三) - 从入门到精通 - 测试计划(Test Plan)的元件(详解教程)

1.简介 上一篇中已经教你如何通过JMeter来创建一个测试计划&#xff08;Test Plan&#xff09;&#xff0c;那么这一篇我们就将JMeter启动起来&#xff0c;创建一个测试计划&#xff08;Test plan&#xff09;&#xff0c;然后给大家介绍一下测试计划&#xff08;Test Plan&am…...

20天学会rust(一)和rust say hi

关注我&#xff0c;学习Rust不迷路 工欲善其事&#xff0c;必先利其器。第一节我们先来配置rust需要的环境和安装趁手的工具&#xff0c;然后写一个简单的小程序。 安装 Rust环境 Rust 官方有提供一个叫做 rustup 的工具&#xff0c;专门用于 rust 版本的管理&#xff0c;网…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...