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? 在JavaScript中,cookie是一种小型的文本文件,它存储在用户的计算机上。通过使用cookie,网站可以向用户的浏览器发送数据,并将该数据保留在浏览器中,使网站能够在不同页面之间传递数据或存储…...
【单片机】晨启科技,酷黑版,简易电压采集装置
简易电压采集装置(限MSP430、STM32单片机) 任务要求: 设计制作一个简易电压采集与显示装置,实现如下基本功能: 评分细则: 1.通过单片机内部ADC模块采集1路电压并通过OLED屏显示电压大小;&#x…...
任务12、Quality指令加持,Midjourney生成电影级数码作品
12.1 任务概述 本次实验任务旨在帮助你掌握Midjourney AI绘画中的Quality指令。通过深入介绍Quality指令的概念和作用,我们将解释为什么它在绘画中至关重要。通过测试不同的Quality参数对绘画效果的影响,并提供实战演示,你将学会如何在Midjourney中设置Quality参数以达到更…...
第4章 字符串和格式化输入/输出
本章介绍以下内容: 函数:strlen() 关键字:const 字符串 如何创建、存储字符串 如何使用strlen()函数获取字符串的长度 用C预处理器指令#define和ANSIC的const修饰符创建符号常量 本章重点介绍输入和输出。与程序交互和使用字符串可以编写个性…...
嵌入式开发学习(STC51-7-矩阵按键)
内容 按下S1-S16键,对应数码管最左边显示0-F 矩阵按键简介 独立按键与单片机连接时,每一个按键都需要单片机的一个I/O 口,若某单片机系统需较多按键,如果用独立按键便会占用过多的I/O口资源;而单片机 系统中I/O口资…...
WMS仓储管理系统的价值从哪些方面体现
仓库管理在不断改善,采用信息化来管理仓库。自从使用了WMS仓储管理系统解决方案后,仓库管理的效率大大提高了,而且WMS系统有很多价值。 首先,WMS系统可以帮助员工更省时省力地完成仓库管理工作,提高效率和准确性。传统…...
网站推荐第二期-沉浸式网页翻译
通过在浏览器上安装插件形式实现,接入多方翻译接口,实现全平台翻译功能,甚至可以使用openai的chatgpt,效率倍增。 不仅可以双语阅读网页,甚至pdf也支持翻译。 推荐网址如下: 双语网页翻译 - 电子书翻译 …...
【独立后台】快递小程序便宜寄快递系统小程序 对接易达
快递代发项目简介: 顾名思义就是帮发快递。原本产业链是客户-快递之间的联系,现在变成了客户-我们-快递,简单来说就是我们把客户聚集到一起团购到了更优惠的价格。很简单就是赚一个差价, 单子多就能和各个快递合作的平台&#x…...
【JVM】垃圾回收 ——自问自答2
Q: System.gc() 的理解 System.gc()底层调用的是 Runtime.getRuntime.gc(),会现实出发FullGC。 但是,它的调用附带一个免责声明,无法保证对垃圾收集器的调用。 Q: 内存溢出和内存泄漏? 内存溢出: 简而言之…...
MySQL数据库数据类型
MySQL数据库数据类型分类 在MySQL数据库中,MySQL数据类型分有四大类:数值类型、文本/二进制类型、时间日期和String类型。以下是这四大类的具体类型: 数值类型 数值类型的范围和字节大小: tinyint类型 tinyint类型只有一个字节…...
【力扣】27. 移除元素 <快慢指针、首尾指针>
【力扣】27. 移除元素 给你一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,并返回移除后数组的新长度。不要使用额外的数组空间,必须仅使用 O(1) 额外空间并原地修改输入数组。元素的顺序可以改变。你不需要考虑数组中超…...
【每日一题】—— C. Challenging Cliffs(Codeforces Round 726 (Div. 2))
🌏博客主页:PH_modest的博客主页 🚩当前专栏:每日一题 💌其他专栏: 🔴 每日反刍 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓称…...
想在金融界拥有一席之地吗—社科院杜兰大学金融管理硕士助你圆梦
追求高学历是为了什么?一纸证书吗?显然并非如此,只有读过研的人才有话语权。在上升一个平台后,你必然会发现,更高学历得到的不止是一张文凭。而是更大的平台、更广阔的视野、更包容的环境,更多样的文化。最…...
Moonbeam与Nodle网络集成,增添物联网功能
领先的波卡跨链互连开发平台Moonbeam近期宣布与Nodle Network达成XCM集成,将NODL Token带到Moonbeam生态之中。本次集成将会开启波卡中Moonbeam和Nodle网络以及通过Moonbeam互连合约相连的远程链之间的流动性。 Nodle网络是一个为物联网(Internet of Th…...
关于docker 在ubuntu16.04 上的安装
https://www.sohu.com/a/708313241_121368355 参考教程: https://www.runoob.com/docker/docker-image-usage.html 镜像网址 https://hub.docker.com/...
Cmder启动加速
Cmder是一个比较好用的命令行工具,可以通过修改默认Git地址提高启动速度: 打开vendor/init.bat添加本机Git地址,并且打开启动时间显示 :: Use /v command line arg or set to > 0 for verbose output to aid in debugging. set GIT_INSTA…...
【windows】windows上如何使用linux命令?
前言 windows上的bat命令感觉不方便,想在windows上使用linux命令。 有人提供了轮子,本文简单介绍一些该轮子的安装与使用,希望能够帮助到和我有一起需求的网友。 我的答案是busybox。 1.安装busybox.exe 在这个网站上安装busybox busyb…...
Docker Compose: 集合管理Docker的工具安装
Docker Compose:集合管理多个Docker容器的工具,在安装docker时windows,macos默认安装Docker Compose,linux需要自己手动安装 去官网https://github.com/docker/compose/releases下载需要的版本$ sudo chmod x ./docker-compose-linux-x86_64$ sudo cp .…...
Jmeter(三) - 从入门到精通 - 测试计划(Test Plan)的元件(详解教程)
1.简介 上一篇中已经教你如何通过JMeter来创建一个测试计划(Test Plan),那么这一篇我们就将JMeter启动起来,创建一个测试计划(Test plan),然后给大家介绍一下测试计划(Test Plan&am…...
20天学会rust(一)和rust say hi
关注我,学习Rust不迷路 工欲善其事,必先利其器。第一节我们先来配置rust需要的环境和安装趁手的工具,然后写一个简单的小程序。 安装 Rust环境 Rust 官方有提供一个叫做 rustup 的工具,专门用于 rust 版本的管理,网…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
