使用JavaScript操作Cookie详解_javascript存储

Cookie是服务器存于浏览器的小段数据,用于会话管理等;通过document.cookie可读写,需手动解析字符串,设置属性如max-age、path控制作用域与生命周期,删除则设max-age为负值。

使用javascript操作cookie详解_javascript存储

在Web开发中,Cookie是一种常用的客户端存储方式,允许我们在用户的浏览器中保存少量数据。JavaScript提供了操作Cookie的能力,虽然原生API并不像localStorage那样直观,但通过手动解析和设置document.cookie,我们可以实现对Cookie的读、写、删除等操作。

什么是Cookie?

Cookie是服务器发送到用户浏览器并保存在本地的一小段数据。它会在后续的请求中被自动发送回服务器,常用于会话管理(如登录状态)、个性化设置或跟踪用户行为。

在JavaScript中,可以通过document.cookie访问和操作Cookie。注意:它不是一个对象,而是一个特殊的字符串接口——读取时返回所有可用Cookie的字符串,设置时需要按格式拼接字符串来添加或修改。

写入Cookie

使用document.cookie = “key=value”可以添加一个Cookie。但为了更精确控制,通常还需设置以下可选属性:

立即学习“Java免费学习笔记(深入)”;

expires:过期时间(GMT格式) max-age:有效期(秒数) path:指定路径(默认为当前路径) domain:指定域名 secure:仅通过HTTPS传输 httponly:无法通过JavaScript访问(只能由服务器设置)

示例:设置一个7天后过期的用户偏好Cookie

document.cookie = “theme=dark; max-age=604800; path=/”;

说明:max-age=604800表示7天(7×24×3600秒),path=/确保整个站点都能访问该Cookie。

读取Cookie

读取document.cookie返回的是一个字符串,包含所有Cookie,格式为key1=value1; key2=value2。我们需要自行解析。

推荐封装一个函数来获取指定名称的Cookie值:

function getCookie(name) {
  const cookies = document.cookie.split(‘; ‘);
  for (let cookie of cookies) {
    const [key, value] = cookie.split(‘=’);
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

使用decodeURIComponent是为了正确处理中文或特殊字符。

调用示例:getCookie(‘theme’) 返回 ‘dark’。

删除Cookie

JavaScript无法直接“删除”Cookie,但可以通过设置过期时间为过去来让浏览器自动清除。

方法是将expires设为一个过去的日期,或max-age设为负数,并确保path和domain与原Cookie一致。

function deleteCookie(name, path = ‘/’) {
  document.cookie = `${name}=; max-age=-1; path=${path}`;
}

调用deleteCookie(‘theme’)即可移除名为theme的Cookie。

基本上就这些。虽然现代项目更多使用localStorage或sessionStorage来存储前端数据,但在需要与后端协同维护会话状态时,JavaScript操作Cookie仍是必须掌握的基础技能。关键是理解其字符串接口的特性,以及合理设置作用域和生命周期。不复杂但容易忽略细节。

以上就是使用JavaScript操作Cookie详解_javascript存储的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1533877.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript中的错误监控与上报_javascript工程化
上一篇 2025年12月21日 01:07:56
JavaScript 弱引用:WeakMap 与 WeakSet 的使用场景
下一篇 2025年12月21日 01:08:10

相关推荐

  • PHP匿名函数怎么用_PHP匿名函数使用场景分析

    PHP匿名函数是无名函数,可作为回调或赋值给变量,常用在数组处理、事件回调、逻辑封装等场景,支持use引入外部变量及fn短语法,结合bindTo可访问对象私有成员。 PHP匿名函数,也叫闭包函数(Closure),是一种没有名称的函数,通常作为回调使用或赋值给变量。它在实际开发中非常灵活,尤其适合用…

    2026年9月22日
    100
  • 中国联通正式获得开展 eSIM 手机运营服务商用试验的批复

    感谢网友 会弹琴的九号、学士 的线索投递! 10月13日,三大运营商官方微信号相继发布消息,宣告eSIM服务进入新阶段。其中,中国联通于当日上午10:00率先发布推文《抢约!联通eSIM来了!》,动作迅速,展现出强烈的市场积极性;中国移动在傍晚19:29发布《中国移动全面上线eSIM手机办理》;而中…

    2026年9月22日
    200
  • 为什么建议手动定义Java序列化ID

    手动定义serialVersionUID可确保序列化兼容性,避免因类结构变化导致反序列化失败。Java默认生成的ID依赖类名、字段等信息,编译环境或代码微小改动均使其改变,易引发InvalidClassException。显式声明后,可在兼容性变更时主动控制ID更新,保留原ID则允许旧版本读取新对象…

    2026年9月22日
    200
  • mysql怎么使用全文索引 mysql创建全文索引的配置方法

    mysql怎么使用全文索引 mysql创建全文索引的配置方法mysql怎么使用全文索引 mysql创建全文索引的配置方法mysql怎么使用全文索引 mysql创建全文索引的配置方法mysql怎么使用全文索引 mysql创建全文索引的配置方法

    mysql使用全文索引的核心是让数据库像搜索引擎一样理解并高效检索文本内容。1. 创建全文索引:可在建表时或之后通过alter table语句为char、varchar或text字段添加fulltext索引;2. 使用match against查询:支持自然语言模式(自动过滤停用词并按相关性排序)和…

    2026年9月22日 用户投稿
    100
  • VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​

    VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​VSCode如何通过调试变量监视列表批量追踪数据变化 VSCode变量监视列表批量追踪的新颖技巧​

    vscode中高效批量追踪数据变化的关键是将监视列表用作表达式求值器,而非仅添加单一变量;2. 可在监视列表中添加复杂对象路径(如user.profile.address.city)、计算表达式(如(a + b) * c)、函数调用(如calculatetotal(items))或条件判断(如myv…

    2026年9月22日 用户投稿
    000
  • 在Java中如何统计List中元素出现次数

    答案是使用Map或Stream API统计List元素频次最高效。通过HashMap手动遍历统计,或用Java 8的Stream结合groupingBy和counting()实现简洁计数,Collections.frequency适用于小数据量但性能较差,推荐Stream方式兼顾性能与可读性。 在J…

    2026年9月22日
    900
  • 如何设置Linux服务超时参数 systemd服务超时配置

    如何设置Linux服务超时参数 systemd服务超时配置如何设置Linux服务超时参数 systemd服务超时配置如何设置Linux服务超时参数 systemd服务超时配置如何设置Linux服务超时参数 systemd服务超时配置

    systemd服务超时参数调整方法包括:1.使用systemctl show查看timeoutstartsec、timeoutstopsec、timeoutsec字段获取当前配置;2.通过systemctl edit编辑unit文件设置timeoutstartsec、timeoutstopsec或t…

    2026年9月22日 用户投稿
    000
  • 360浏览器如何切换极速模式

    在浏览网页时,想要获得更流畅、更快速的上网体验,许多用户都希望将360浏览器切换至极速模式。那么具体该如何操作呢?以下是几种简单有效的方法。 方法一:通过地址栏图标一键切换 打开360浏览器后,留意地址栏右侧,会看到一个闪电图标和一个书本图标的组合。其中,闪电代表极速模式,书本则代表兼容模式。只需点…

    2026年9月22日
    100
  • c盘清理工具哪个好用_好用的C盘清理工具推荐与使用评测

    推荐C盘清理方案:系统自带工具如磁盘清理、存储感知和手动清%temp%目录安全可靠,适合日常维护;第三方工具CCleaner、金舟Windows优化大师、风云C盘清理大师和全能C盘清理专家提供一键深度清理,操作便捷且误删率低;空间分析工具WizTree、SpaceSniffer和TreeSize可可…

    2026年9月22日
    000
  • mysql安装完如何诊断 mysql慢查询分析与优化方法

    要解决 mysql 慢查询问题,首先要开启慢查询日志,其次使用 mysqldumpslow 分析日志,再通过 explain 查看执行计划,最后根据常见优化建议改进 sql 和索引。具体步骤如下:一、修改配置文件或动态开启慢查询日志,并设置阈值和路径;二、使用 mysqldumpslow 工具分析慢…

    2026年9月22日
    100
  • 主板供电相数对CPU超频稳定性的影响:14相 vs. 20相实测

    20相供电主板在超频下表现更稳,实测显示其VRM温度更低、电压波动更小、性能输出更一致,尤其适合极限超频和高负载场景,而14相供电配合优质用料也能满足主流超频需求,普通用户无需盲目追求高相数。 主板供电相数直接影响CPU在高负载和超频状态下的电压稳定性和温度控制。很多人在选择主板时会看到“14相”或…

    2026年9月22日
    200
  • PHP如何实现视频留言评论_PHP实现视频留言评论功能

    答案:通过数据库设计、前端表单、后端处理和评论展示四步实现PHP视频留言功能。1. 创建comments表存储信息;2. 构建表单提交昵称与评论;3. 用add_comment.php接收并存入数据库;4. 在页面读取并安全输出评论,防止XSS。 要实现视频留言评论功能,PHP可以结合前端页面、数据…

    2026年9月22日
    000
  • Java中如何区分逻辑错误和系统异常

    系统异常是程序运行中由JVM抛出的RuntimeException,如空指针、数组越界,会导致程序中断并打印堆栈;逻辑错误是程序语法正确但结果不符预期,如条件写反、循环次数错误,不会崩溃但行为异常。两者区别在于是否抛出异常、是否中断执行及调试方式不同,需通过防御性编程、单元测试和日志调试加以防范。 …

    2026年9月22日
    000
  • mysql安装后怎么建表 mysql创建数据表的详细步骤

    mysql安装后怎么建表 mysql创建数据表的详细步骤mysql安装后怎么建表 mysql创建数据表的详细步骤mysql安装后怎么建表 mysql创建数据表的详细步骤mysql安装后怎么建表 mysql创建数据表的详细步骤

    安装完 mysql 后,建表的关键在于先创建数据库并选择使用,然后通过 create table 语句定义表结构。1. 创建数据库:使用 create database mydatabase; 创建数据库;2. 使用数据库:通过 use mydatabase; 选择当前操作的数据库;3. 建表语法:…

    2026年9月22日 用户投稿
    200
  • 夸克浏览器电脑网页版访问入口 夸克官网主页链接地址

    夸克浏览器电脑网页版访问入口是https://www.quark.cn/,用户可直接在浏览器地址栏输入该链接访问,其界面采用极简设计并集成智能搜索、网盘服务与跨设备同步等功能。 立即进入“☞☞☞☞☞点击夸克资源网(永久免费)入口☜☜☜☜☜”; 立即进入“☞☞☞☞☞点击夸克浏览器电脑网页版访问入口☜☜…

    2026年9月22日
    500
  • Spring Boot 应用中的单元测试、Mockito 和集成测试:最佳实践

    第一段引用上面的摘要: 本文旨在帮助初学者理解在 Spring Boot 应用中何时以及如何使用 JUnit、Mockito 和集成测试。我们将探讨这些测试框架在 Controller、Service 和 Repository 层中的应用,并提供示例说明何时使用 Mockito 模拟对象,以及何时使…

    2026年9月22日
    000
  • PHP一键环境如何设置网站域名解析_本地域名解析配置

    配置本地域名需修改hosts文件并设置Web服务器虚拟主机。1. 在hosts添加“127.0.0.1 myproject.test”实现域名解析;2. Apache中编辑httpd-vhosts.conf添加VirtualHost指向项目目录,确保加载该配置文件后重启服务;3. Nginx中在vh…

    2026年9月22日
    700
  • mysql如何输入变量值 mysql交互式代码输入步骤详解

    mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解mysql如何输入变量值 mysql交互式代码输入步骤详解

    在mysql命令行中交互式输入变量值可通过预处理语句或用户自定义变量实现。1. 使用预处理语句时,先用prepare定义含占位符的sql语句,再通过set设置变量值,最后用execute执行并传参,完成后需deallocate释放资源;2. 使用用户自定义变量时,直接通过set赋值并在sql语句中引…

    2026年9月22日 用户投稿
    100
  • Karate框架中处理带方括号和日期范围的GET请求参数

    本文旨在解决Karate框架中构建包含复杂、带方括号(如filters[start_date])及日期范围的GET请求参数时遇到的URL编码问题。通过对比直接定义查询对象和使用param关键字的方法,详细阐述了如何正确地构造URL,确保参数格式符合预期,从而有效进行API测试。 1. 问题背景与挑战…

    2026年9月22日
    000
  • RAID 0阵列对NVMe SSD性能的提升与数据安全风险分析

    RAID 0通过多NVMe SSD并行提升读写性能,理论速度翻倍且显著优化高负载响应,但无冗余导致任一硬盘故障即全阵列崩溃,数据恢复极难,仅建议用于可接受高风险的临时工作或性能优先场景,并必须配合外部备份。 raid 0通过将数据条带化分布在多个存储设备上,理论上可提升读写性能。在搭配nvme ss…

    用户投稿 2026年9月22日
    200

发表回复

登录后才能评论
关注微信