您好,登錄后才能下訂單哦!
今天小編給大家分享一下JavaScript如何對(duì)Cookie進(jìn)行操作的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
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;"
以上就是“JavaScript如何對(duì)Cookie進(jìn)行操作”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。