建站
咨詢
售后
建站咨詢
新聞中心
大家應(yīng)該看過一些網(wǎng)站，在第一次訪問的時候，它會彈出一些小提示或者操作指導(dǎo)，類似于下圖所示：
裕民網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,裕民網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為裕民成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的裕民做網(wǎng)站的公司定做！
當我關(guān)閉了這個提示以后，接下來它都不會彈出來。當我關(guān)閉了瀏覽器再打開，它也不會再彈出來。但是，大家觀察截圖右上角，可以看到我并沒有登錄，那么網(wǎng)站是怎么“記住”了我關(guān)閉這個提示的呢?實際上是通過 Cookies 來記錄的。當我點擊X 關(guān)閉這個提示的時候，網(wǎng)站的JavaScript 會往 Cookies 里面寫入一條標記。當我們每次打開這個網(wǎng)站新的頁面的時候，它都會判斷一下 Cookies 里面有沒有這個標記。如果沒有這個標記，就彈出提示。如果有這個標記，就不彈出。
Cookies 本質(zhì)上是一個長字符串，里面使用分號隔開了很多項，每一項由 Key 和 Value 組成，叫做一個 Cookie。
要不要彈出提示的開關(guān)在這里
當我們要往 Cookies 里面添加一條 Cookie 有兩種常用方式：使用 JavaScript 或者通過后端設(shè)置。
使用 JavaScript 讀寫 Cookies
讀取當前所有的 Cookies，可以使用代碼：
- document.cookie
運行效果如下圖所示：
需要注意的是，如果你要判斷某個鍵值是不是在 Cookies 里面，那么你需要做字符串匹配。這不能像 Object 一樣直接根據(jù) Key 去找 Value 或者判斷 Key 在不在里面。
要寫入一條 Cookie，我們可以使用代碼：
- document.cookie = 'key=value'
例如：
這里我們使用document.cookie=新的值，看起來像是覆蓋了整個 Cookies，但實際上并不是這樣。如果你新增的 key 跟已有的相同，那么會覆蓋原有的這一個 Cookie的值，不影響其他的 Cookie;如果你新增的 key 不在原來的 Cookies 里面，那么它將會被添加到末尾。
使用 FastAPI讀寫 Cookies
還有一種方式是在后端設(shè)置 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': '網(wǎng)站正常運行'}
這段代碼的關(guān)鍵是路由函數(shù)的第一個參數(shù)response: Response。它的值是一個Response對象。我們只需要調(diào)用這個對象的.set_cookie方法，就能把自定義的 Cookie 添加進去。需要注意的是，你不需要主動返回這個 response 對象。
運行效果如下圖所示，分別演示了有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。
運行效果如下圖所示：
如果你想從 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}
運行效果如下圖所示：
總結(jié)
無論使用前端方式還是后端方式，你都可以通過在 Cookies 里面儲存一些信息，來實現(xiàn)某些開關(guān)或者記錄一些信息。
本文轉(zhuǎn)載自微信公眾號「未聞Code」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系未聞Code公眾號。
本文名稱：一日一技：前端與后端都是怎么讀寫Cookies的？
標題路徑：http://www.5511xx.com/article/cdodocd.html
