建站
咨詢
售后
建站咨詢
新聞中心
Web 服務(wù)器和 HTTP 服務(wù)器是無狀態(tài)的，因此當(dāng) Web 服務(wù)器將網(wǎng)頁發(fā)送到瀏覽器時(shí)，連接會(huì)被斷開，服務(wù)器會(huì)忘記與用戶相關(guān)的所有內(nèi)容。
專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)西秀免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
那么瀏覽器和 Web 服務(wù)器是怎樣記住用戶信息的?cookie 被發(fā)明出來解決這個(gè)問題。
當(dāng)用戶訪問網(wǎng)頁時(shí)，他們的名字、唯一 ID 或其他任何信息都可以存儲(chǔ)在瀏覽器的 cookie 中。當(dāng)用戶下次又回到網(wǎng)頁時(shí)，cookie 將記住他們的名字或唯一 ID。
Cookie 只是存儲(chǔ)在計(jì)算機(jī)瀏覽器中的小型文本文件。它們包含以下數(shù)據(jù)：
- 保存數(shù)據(jù)的 Name-value 對(duì)
- 日期到期時(shí)，該 cookie 失效
- 應(yīng)將其發(fā)送到的服務(wù)器的域和路徑
而cookie也有一些值得一提的限制：
- 每個(gè)cookie的最大為 4096 字節(jié)
- 每個(gè)域最多20個(gè)cookie(每個(gè)瀏覽器略有不同)
- Cookie是其自己的域名專用的(網(wǎng)站無法讀取其他域的 Cookie，只能是它自己的)
- 大小限制適用于整個(gè)cookie，而不僅僅是它的值
在瀏覽器中，cookie通過 DOM 被公開為 document.cookies。
下面我們將介紹如何用 JavaScript 在瀏覽器中設(shè)置、獲取、更新和刪除 Cookie 數(shù)據(jù)。
Create Cookies
用 JavaScript 在瀏覽器中設(shè)置 cookie 非常簡(jiǎn)單!我將在下面向你展示。
(1) 設(shè)置 Cookie
以下是在瀏覽器中用 JavaScript 創(chuàng)建新 cookie 的執(zhí)行代碼：
- document.cookie = "userId=nick123"
運(yùn)行該代碼后，打開瀏覽器，你應(yīng)該能在開發(fā)者工具的 Application(Safari 或Chrome)或 Storage(Firefox)中找到該 cookie。
(2) 設(shè)置 cookie 的過期時(shí)間
你還可以向 Cookie 中添加過期時(shí)間(UTC)，告知瀏覽器應(yīng)該在什么時(shí)候?qū)⑵鋭h除：
- document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"
(3) 設(shè)置一個(gè) Cookie 路徑
你還可以告訴瀏覽器 cookie 所屬的路徑(默認(rèn)值是當(dāng)前頁面的路徑)：
- document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"
(4) 設(shè)置 cookie 域
我們將介紹的最后一段數(shù)據(jù)是 cookie 所屬的域(默認(rèn)為當(dāng)前域)：
- document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"
Read Cookies
通過 document.cookie 對(duì)象，用 JavaScript 讀取 cookie 也非常簡(jiǎn)單：
(1) 讀取單個(gè)頁面所有的 Cookie
將單個(gè)頁面的所有 cookie 作為字符串獲取，每個(gè) cookie 用分號(hào)分隔：
- const cookies = document.cookie
(2) 讀取具有特定名稱的Cookie
要訪問具有特定名稱的 cookie，我們需要獲取頁面上所有的 cookie 并解析字符串，然后查找我們想要尋找的 cookie 名稱的匹配項(xiàng)。
這是一個(gè)用正則表達(dá)式完成此任務(wù)的函數(shù)：
- function getCookieValue(name) {
- let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
- return result ? result.pop() : ""
- }
你這樣使用該函數(shù)：
- getCookieValue("userId") //returns nick123
這將返回與提供給函數(shù)的 name 參數(shù)對(duì)應(yīng)的字符串值。
如果你還沒有掌握正則表達(dá)式，還有另一個(gè)同樣功能的函數(shù)：
- function getCookieValue(name) {
- const namenameString = name + "="
- const value = document.cookie.split(";").filter(item => {
- return item.includes(nameString)
- })
- if (value.length) {
- return value[0].substring(nameString.length, value[0].length)
- } else {
- return ""
- }
- }
用相同的方法使用該函數(shù)：
- getCookieValue("userId") //returns nick123
Update Cookies
你可以通過創(chuàng)建的方式用新值覆蓋 cookie 來更改它的值。
你可以用此代碼覆蓋本文前面創(chuàng)建的 cookie "userId" ：
- document.cookie = "userId=new_value"
當(dāng)你再次運(yùn)行 getCookieValue 函數(shù)時(shí)，將返回新值：
- getCookieValue("userId") //returns new_value
Delete Cookies
你可以給 cookie 設(shè)置一個(gè)空值，并將其過期日期設(shè)置為過去的任意時(shí)間來刪除 cookie。
如果我們想要?jiǎng)h除前面例子的 cookie "userId" ，請(qǐng)按以下步驟操作：
- document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"
很簡(jiǎn)單吧?
網(wǎng)站標(biāo)題：用JavaScript操作Cookie
網(wǎng)站路徑：http://www.dlmjj.cn/article/dpocehs.html
