一日一技:前端与后端都是怎么读写 Cookies 的?

简介: 一日一技:前端与后端都是怎么读写 Cookies 的?

大家应该看过一些网站,在第一次访问的时候,它会弹出一些小提示或者操作指导,类似于下图所示:


1.png


当我关闭了这个提示以后,接下来它都不会弹出来。当我关闭了浏览器再打开,它也不会再弹出来。但是,大家观察截图右上角,可以看到我并没有登录,那么网站是怎么“记住”了我关闭这个提示的呢?


实际上是通过 Cookies 来记录的。当我点击X 关闭这个提示的时候,网站的JavaScript 会往 Cookies 里面写入一条标记。当我们每次打开这个网站新的页面的时候,它都会判断一下 Cookies 里面有没有这个标记。如果没有这个标记,就弹出提示。如果有这个标记,就不弹出。


Cookies 本质上是一个长字符串,里面使用分号隔开了很多项,每一项由 Key 和 Value 组成,叫做一个 Cookie。


2.png



当我们要往 Cookies 里面添加一条 Cookie 有两种常用方式:使用 JavaScript 或者通过后端设置。


使用 JavaScript 读写 Cookies


读取当前所有的 Cookies,可以使用代码:


document.cookie


运行效果如下图所示:


3.png


需要注意的是,如果你要判断某个键值是不是在 Cookies 里面,那么你需要做字符串匹配。这不能像 Object 一样直接根据 Key 去找 Value 或者判断 Key 在不在里面。


要写入一条 Cookie,我们可以使用代码:


document.cookie = 'key=value'


例如:


4.png


这里我们使用document.cookie=新的值,看起来像是覆盖了整个 Cookies,但实际上并不是这样。如果你新增的 key 跟已有的相同,那么会覆盖原有的这一个 Cookie的值,不影响其他的 Cookie;如果你新增的 key 不在原来的 Cookies 里面,那么它将会被添加到末尾。


使用 FastAPI读写 Cookies


还有一种方式是在后端设置 Cookies,我们以 FastAPI 为例来进行演示:


首先是向浏览器写入 Cookies,使用的代码如下:


from fastapi import FastAPI, Response
app = FastAPI()
@app.get('/')
def index(response: Response, name: str = ''):
    if not name:
        name = 'kingname'
    response.set_cookie('name', name)
    return {'success': True, 'msg': '网站正常运行'}


这段代码的关键是路由函数的第一个参数response: Response。它的值是一个Response对象。我们只需要调用这个对象的.set_cookie方法,就能把自定义的 Cookie 添加进去。需要注意的是,你不需要主动返回这个 response 对象。


运行效果如下图所示,分别演示了有URL参数和没有URL参数的情况。


5.png

没有 URL 参数


6.png

有 URL 参数


至于读取 Cookies 也非常简单,并且还可以根据 Key 指定要哪几项:


from typing import Optional
from fastapi import FastAPI, Cookie
app = FastAPI()
@app.get('/')
def index(name: str = '', info: Optional[str] = Cookie(None)):
    if not name:
        name = 'kingname'
    msg = f'{name} 你好,你的 Cookies中的info字段的值是: {info}'
    return {'success': True, 'msg': msg}


我们注意到参数中有一项叫做info,这个参数名字就对应了 Cookies 中某一项的 Key。只有这个 Key 存在,这个 info 参数才会有值,否则它就是 None。


运行效果如下图所示:


7.png


如果你想从 Cookies 中拿多项,那么你可以多写几个参数:


@app.get('/')
def index(name: str = '', info: Optional[str] = Cookie(None), is_new_user: Optional[bool] = Cookie(False)):
    if not name:
        name = 'kingname'
    msg = f'{name} 你好,你的 Cookies中的info字段的值是: {info}, 是新用户吗:{is_new_user}'
    return {'success': True, 'msg': msg}


运行效果如下图所示:


8.png


总结


无论使用前端方式还是后端方式,你都可以通过在 Cookies 里面储存一些信息,来实现某些开关或者记录一些信息。


请关注微信公众号【未闻Code】获取更多精彩文章。

目录
相关文章
|
6天前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
74 5
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
446 1
|
4月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
287 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
5月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
391 70
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
295 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
3月前
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
186 0
|
6月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
158 1
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
465 12
|
7月前
|
监控 前端开发 Java
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
266 9
|
8月前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
3887 4