还在用document.cookie操作cookie吗?试试这个

以前在开发时想要获取和修改cookie一直都是使用document.cookie来进行操作的,而且cookie的属性又很多,赋值起来十分不方便,并且获取的时候不能根据属性名进行精确获取单独的一条cookie,真的很难搞诶。那有没有什么比较现代化的API来帮助我们更好的处理cookie呢。

需弃用的document.cookie

我们先来看看document.cookie处理方式

假设我想要获取当前文档某一个cookie,那我也必须使用document.cookie来获取所有非httpOnly, secure的cookie,然后在进行提取。

有时候我们写模板就需要通过结果去获取数据,但是接口有需要使用cookies中的某个cookie,所以就需要进行额外提取。比如我要获取alimail的_csrf_token_cookie,就需要下面这样提取。

js 复制代码
document.cookie
  .split("; ") // 以分号和空格分隔
  .find((item) => item.includes("_csrf_token_="))
  ?.replace("_csrf_token_=", "");

目前在开发中前端写入cookie没有遇见,但是也很麻烦,特别是在定义cookie的不同属性,而且不支持一次性写入多cookie。

并且设置的时候还有些特殊的限制需要注意。

  • 路径限制
    • 设置 Path=/app 时,该 Cookie 仅在路径 /app 及其子路径(如 /app/sub 下生效。
    • 若当前页面路径不在 /app 或其子路径下,浏览器会忽略此 Cookie。
  • 域名不匹配

    • 默认情况下,Cookie 的 Domain 属性为当前页面的域名。
    • 若尝试设置跨域 Cookie(如从 www.example.com 设置 Domain=example.com),需确保当前域名是子域名且符合浏览器安全策略。
  • 未编码特殊字符

    • 由于;,、空格等符号在cookie中有特殊用处,键值不包含它们,如果包含需使用 encodeURIComponent() 编码。

各位兄弟你们在日常开发中如何使用的cookie啊。

赶快来使用CookieStore

CookieStore 是浏览器提供的一个新的 API,旨在更现代化、更便捷地管理 Cookie。

  • 异步操作 :基于 Promise,避免传统 document.cookie 同步操作可能导致的性能问题。
  • 类型安全:直接操作 Cookie 对象(键值对),而非手动解析字符串。
  • Service Worker 支持:可在 Service Worker 中读写 Cookie,实现离线场景下的 Cookie 管理。
  • 细粒度控制:支持设置 Cookie 的路径、域名、过期时间、安全属性等。
  • 事件监听:可监听 Cookie 的变化(新增、修改、删除)。

写入set

自动化的检测,我们再也不用被耍了,通过document.cookie明明设置了对应的cookie,为啥获取不到呢。让我们自己掌控我们的定义,设置的有问题直接抛错。

js 复制代码
const zh = await cookieStore.set({
  name: 'zh',
  value: 'llm',
  expires: Date.now() + 24 * 60 * 60 * 1000, // 1天后过期
  domain: 'juejin.cn',
  path: '/',
  secure: true,
  sameSite: 'lax'
});

获取get, getAll

  • get 通过cookieName获取某个指定cookie。 对于同名的cookie,应该会获取最后一次添加的。
js 复制代码
const zh = await cookieStore.get("zh")
  • getAll 获取所有非httpOnly, secure的cookie。
js 复制代码
const allCookies = await cookieStore.getAll();

删除delete

对于同名cookie,也是删除最后一次添加的。

js 复制代码
const delZh = await cookieStore.delete('zh');

change事件

因为CookieStore继承了EventTarget所以它理所应当的可以监听事件,刚好html5提供了一个change事件可以监听cookie的变化。

  • event.changed可以拿到所有添加的cookie。
  • event.deleted可以拿到所有删除的cookie。
js 复制代码
cookieStore.addEventListener('change', event => {
  event.changed.forEach(cookie => {
    console.log(`Cookie 被修改: ${cookie.name} = ${cookie.value}`);
  });
  event.deleted.forEach(cookie => {
    console.log(`Cookie 被删除: ${cookie.name}`);
  });
});

Service worker中使用

该API还可以在Service worker中使用,做一些和cookie相关的请求设置,例如用户偏好设置等等。感兴趣的可以研究研究,不了解Service Worker的使用可以看这个简单的demo

兼容性

兼容性还是不太好,但是看你们的需求了,这里只提供下大致用法。

往期年度总结

往期文章

专栏文章

🔥如果此文对你有帮助的话,欢迎💗关注 、👍点赞 、⭐收藏✍️评论, 支持一下博主~

公众号:全栈追逐者,不定期的更新内容,关注不错过哦!

作者:Spirited_Away

链接:juejin.cn/post/749046...

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码