当前位置: 首页 > 科技观察

每日一技能:前后端如何读写cookies?

时间:2023-03-18 17:06:04 科技观察

你应该看过一些网站。第一次访问时,会弹出一些小提示或操作说明,类似下图:当我关闭这个提示后,下一个就不会弹出来了。当我关闭浏览器并重新打开它时,它不会再次弹出。但是,如果你看截图的右上角,可以看到我没有登录,那么网站是怎么“记住”我关闭这个提示的呢?它实际上是通过cookie记录的。当我点击X关闭提示时,网站的JavaScript会在Cookies中写入一个标记。每次我们打开本网站的新页面时,都会判断Cookies中是否有该标记。如果没有这个标记,会弹出提示。如果有这个标记,则不会弹出。Cookie本质上是一个长字符串,其中有许多项以分号分隔。每一项由Key和Value组成,称为Cookie。是否弹出提示的开关就在这里。当我们要在Cookies中添加cookie时,有两种常见的方式:使用JavaScript或者通过后台设置。使用JavaScript读写Cookies读取当前所有的Cookies。可以使用代码:document.cookie运行效果如下图所示:需要注意的是,如果要判断某个key值是否在Cookies中,则需要进行字符串匹配。这不能像Object那样直接根据Key找到Value或者判断Key是否在里面。写一个cookie,我们可以使用代码:document.cookie='key=value'例如:这里我们使用document.cookie=newvalue,这样好像覆盖了整个Cookies,其实不然。如果你添加的key与已有的key相同,则原有cookie的值将被覆盖,不影响其他cookie;如果你添加的key在原来的Cookies中不存在,就会添加到最后。另一种使用FastAPI读写Cookies的方法是在后台设置Cookies。下面以FastAPI为例进行演示:首先,向浏览器写入Cookies。使用的代码如下:fromfastapiimportFastAPI,Responseapp=FastAPI()@app.get('/')defindex(response:Response,name:str=''):ifnotname:name='kingname'response.set_cookie('name',name)return{'success':True,'msg':'网站正常运行'}这段代码的关键在于第一个参数response:路由函数的响应。它的值是一个Response对象。我们只需要调用该对象的.set_cookie方法即可添加自定义Cookie。需要注意的是,你不需要主动返回这个响应对象。运行效果如下图所示,分别演示了带URL参数和不带URL参数的情况。有URL参数没有URL参数。读取Cookies也很简单,你也可以根据Key指定你想要的项目:fromtypingimportOptionalfromfastapiimportFastAPI,Cookieapp=FastAPI()@app.get('/')defindex(name:str='',info:Optional[str]=Cookie(None)):ifnotname:name='kingname'msg=f'{name}您好,您的Cookies中info字段的值为:{info}'return{'success':True,'msg':msg}我们注意到其中一个参数叫做info,这个参数的名字对应Cookies中某一项的Key。只有这个Key存在,info参数才会有值,否则为None。运行效果如下图所示:如果想从Cookies中获取多个item,可以多写几个参数:@app.get('/')defindex(name:str='',info:Optional[str]=Cookie(None),is_new_user:Optional[bool]=Cookie(False)):ifnotname:name='kingname'msg=f'{name}您好,您的Cookies中info字段的值为:{info},你是新用户吗:{is_new_user}'return{'success':True,'msg':msg}运行效果如下图:总结你是用前端方式还是后端方式方法,可以存储一些信息,实现一些开关或者记录一些信息。本文转载自微信公众号“闻所未闻的密码”,可通过以下二维码关注。转载本文请联系Code公众号。