[[410252]]

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

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

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

要不要彈出提示的開關在這里

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

使用 JavaScript 讀寫 Cookies

讀取當前所有的 Cookies，可以使用代碼：

document.cookie 

運行效果如下圖所示：

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

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

document.cookie = 'key=value' 

例如：

這里我們使用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參數的情況。

沒有 URL 參數

有 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。

運行效果如下圖所示：

如果你想從 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} 

運行效果如下圖所示：

總結

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

本文轉載自微信公眾號「未聞Code」，可以通過以下二維碼關注。轉載本文請聯系未聞Code公眾號。