[[410252]]

大家應(yīng)該看過一些網(wǎng)站，在第一次訪問的時候，它會彈出一些小提示或者操作指導(dǎo)，類似于下圖所示：

當(dāng)我關(guān)閉了這個提示以后，接下來它都不會彈出來。當(dāng)我關(guān)閉了瀏覽器再打開，它也不會再彈出來。但是，大家觀察截圖右上角，可以看到我并沒有登錄，那么網(wǎng)站是怎么“記住”了我關(guān)閉這個提示的呢?實(shí)際上是通過 Cookies 來記錄的。當(dāng)我點(diǎn)擊X 關(guān)閉這個提示的時候，網(wǎng)站的JavaScript 會往 Cookies 里面寫入一條標(biāo)記。當(dāng)我們每次打開這個網(wǎng)站新的頁面的時候，它都會判斷一下 Cookies 里面有沒有這個標(biāo)記。如果沒有這個標(biāo)記，就彈出提示。如果有這個標(biāo)記，就不彈出。

Cookies 本質(zhì)上是一個長字符串，里面使用分號隔開了很多項，每一項由 Key 和 Value 組成，叫做一個 Cookie。

要不要彈出提示的開關(guān)在這里

當(dāng)我們要往 Cookies 里面添加一條 Cookie 有兩種常用方式：使用 JavaScript 或者通過后端設(shè)置。

使用 JavaScript 讀寫 Cookies

讀取當(dāng)前所有的 Cookies，可以使用代碼：

document.cookie 

運(yùn)行效果如下圖所示：

需要注意的是，如果你要判斷某個鍵值是不是在 Cookies 里面，那么你需要做字符串匹配。這不能像 Object 一樣直接根據(jù) Key 去找 Value 或者判斷 Key 在不在里面。

要寫入一條 Cookie，我們可以使用代碼：

document.cookie = 'key=value' 

例如：

這里我們使用document.cookie=新的值，看起來像是覆蓋了整個 Cookies，但實(shí)際上并不是這樣。如果你新增的 key 跟已有的相同，那么會覆蓋原有的這一個 Cookie的值，不影響其他的 Cookie;如果你新增的 key 不在原來的 Cookies 里面，那么它將會被添加到末尾。

使用 FastAPI讀寫 Cookies

還有一種方式是在后端設(shè)置 Cookies，我們以 FastAPI 為例來進(jìn)行演示：

首先是向?yàn)g覽器寫入 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': '網(wǎng)站正常運(yùn)行'} 

這段代碼的關(guān)鍵是路由函數(shù)的第一個參數(shù)response: Response。它的值是一個Response對象。我們只需要調(diào)用這個對象的.set_cookie方法，就能把自定義的 Cookie 添加進(jìn)去。需要注意的是，你不需要主動返回這個 response 對象。

運(yùn)行效果如下圖所示，分別演示了有URL參數(shù)和沒有URL參數(shù)的情況。

沒有 URL 參數(shù)

有 URL 參數(shù)

至于讀取 Cookies 也非常簡單，并且還可以根據(jù) 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} 

我們注意到參數(shù)中有一項叫做info，這個參數(shù)名字就對應(yīng)了 Cookies 中某一項的 Key。只有這個 Key 存在，這個 info 參數(shù)才會有值，否則它就是 None。

運(yùn)行效果如下圖所示：

如果你想從 Cookies 中拿多項，那么你可以多寫幾個參數(shù)：

@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} 

運(yùn)行效果如下圖所示：

總結(jié)

無論使用前端方式還是后端方式，你都可以通過在 Cookies 里面儲存一些信息，來實(shí)現(xiàn)某些開關(guān)或者記錄一些信息。

本文轉(zhuǎn)載自微信公眾號「未聞Code」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系未聞Code公眾號。