0

0

JavaScript cookie如何操作_它有什么限制?

狼影

狼影

发布时间:2025-12-17 22:25:02

|

963人浏览过

|

来源于php中文网

原创

JavaScript操作cookie需通过document.cookie,读写受限;写入用key=value;expires=...格式,读取需解析字符串,删除需设过期时间;单个最大4KB、同域约20–30个,不安全且易被清除,适合存登录态等需自动随请求发送的轻量数据。

javascript cookie如何操作_它有什么限制?

JavaScript 操作 cookie 主要靠 document.cookie 这个接口,它看起来像字符串,实际是读写受限的特殊属性。操作本身不难,但细节多、易出错;限制也明确,不能当“小数据库”乱用。

怎么读、写、删 cookie

写入:直接赋值字符串,格式为 key=value; expires=...; path=/; domain=...; Secure; HttpOnly。例如:

  • document.cookie = "theme=dark; expires=Fri, 12 Dec 2025 14:37:00 GMT; path=/";
  • 不设 expires 就是会话 cookie,关浏览器就消失
  • 多个属性用分号+空格分隔,pathdomain 决定作用范围

读取:返回的是所有可访问 cookie 拼成的一个字符串,如 "user=john; lang=zh; cart=3",需手动解析:

  • document.cookie.split('; ') 拆成数组
  • 再对每个项 split('=') 取键值,并 decodeURIComponent() 解码
  • 建议封装成 getCookie('user') 函数,避免每次重复写

删除:本质是覆盖原 cookie,把 expires 设为过去时间即可:

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

  • document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  • 注意要保持 pathdomain 与写入时一致,否则删不掉

cookie 的硬性限制

浏览器对 cookie 有明确的容量和数量上限,不是“想存多少存多少”:

Presentations.AI
Presentations.AI

AI驱动创建令人惊叹的演示文稿

下载
  • 单个 cookie 最大 4KB(含名、值、所有属性),超了会被截断或忽略
  • 同域名下最多约 20–30 个 cookie,超出后旧的可能被自动丢弃
  • 总大小也有隐式限制(比如 Chrome 对整个域名约 8MB,但 cookie 部分仍受 4KB/条约束)

安全与可靠性注意事项

cookie 不是安全或可靠的存储方式,尤其不适合放敏感数据

  • 明文传输风险高:没加 Secure 属性,HTTP 下会被窃听;没加 HttpOnly,JS 可读取,易遭 XSS 窃取
  • 用户可随时清除:手动删 cookie、启用“无痕模式”、浏览器设置禁用等都会导致丢失
  • 跨域隔离严格:a.com 写的 cookie,b.com 根本读不到;子域名共享需显式设 domain=.example.com
  • SameSite 缺失易引发 CSRF:现代应用应设 SameSite=LaxStrict 防范跨站请求伪造

什么场景适合用 cookie?

它的不可替代性在于“自动随 HTTP 请求发送”——这是 localStorage、sessionStorage 完全不具备的:

  • 用户登录态(配合后端 session 或 JWT)
  • 需要服务端识别的偏好设置(如语言、主题)
  • 购物车 ID、访客追踪 ID 等需在首屏就传给后端的信息

其他情况,比如纯前端缓存、大量结构化数据,优先选 localStorage 或 IndexedDB。

基本上就这些。操作不复杂但容易忽略编码、路径、过期时间这些细节,限制虽死板但设计初衷很清晰:轻量、短寿、带上下文——用对地方才有效。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

876

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

757

2023.11.06

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6435

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

352

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

415

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

95

2025.08.19

session失效的原因
session失效的原因

session失效的原因有会话超时、会话数量限制、会话完整性检查、服务器重启、浏览器或设备问题等等。详细介绍:1、会话超时:服务器为Session设置了一个默认的超时时间,当用户在一段时间内没有与服务器交互时,Session将自动失效;2、会话数量限制:服务器为每个用户的Session数量设置了一个限制,当用户创建的Session数量超过这个限制时,最新的会覆盖最早的等等。

318

2023.10.17

session失效解决方法
session失效解决方法

session失效通常是由于 session 的生存时间过期或者服务器关闭导致的。其解决办法:1、延长session的生存时间;2、使用持久化存储;3、使用cookie;4、异步更新session;5、使用会话管理中间件。

754

2023.10.18

全国统一发票查询平台入口合集
全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

19

2026.02.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号