JS?cookie的設(shè)置、讀取和刪除方法例子
概要
“cookie 是存儲于訪問者的計算機(jī)中的變量。每當(dāng)同一臺計算機(jī)通過瀏覽器請求某個頁面時,就會發(fā)送這個 cookie。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值。” - w3school
從JavaScript的角度看,cookie 就是一些字符串信息。這些信息存放在客戶端的計算機(jī)中,用于客戶端計算機(jī)與服務(wù)器之間傳遞信息。在JavaScript中可以通過 document.cookie 來讀取或設(shè)置這些信息。由于cookie 多用在客戶端和服務(wù)端之間進(jìn)行通信,所以除了JavaScript以外,服務(wù)端的語言也可以存取cookie。
一、設(shè)置cookie
在JavaScript 中,可以通過document.cookie屬性來創(chuàng)建、讀取、修改和刪除 cookie信息
設(shè)置一個cookie 信息,[document.cookie=“name=value”]需要以name=value形式的字符串來定義需要注意,一次只能設(shè)置一個名/值對
document.cookie = "name=張三";
cookie 存儲時值不能是用分號(;)、逗號(,)、等號(=)以及空格,因為這些特殊符號是cookie的標(biāo)識符,用于標(biāo)識和設(shè)置cookie的存儲格式,所以:
- 在儲到cookie 時,可以使用 js內(nèi)置的
encodeURIComponent()
函數(shù)對數(shù)據(jù)進(jìn)行編碼 - 在讀取cookie 時,可以使用 js內(nèi)置的
decodeURIComponent()
函數(shù)對數(shù)據(jù)進(jìn)行解碼
document.cookie = "url=https://www.baidu.com/;?id=123"; //https://www.baidu.com/ 實際存儲 document.cookie = "url=" + encodeURIComponent("https://www.baidu.com/;?id=123");
1.給cookie設(shè)置過期時間
默認(rèn)情況下,cookie是會話級別的,也就是說,它們將在用戶關(guān)閉瀏覽器時刪除。但是在實際開發(fā)中,cookie常常需要長期保存,可以通過設(shè)置cookie的過期時間來使其在一定時間內(nèi)保持有效。以下是一個將cookie的過期時間設(shè)置為一天的示例:
const expirationDate = new Date(); expirationDate.setDate(expirationDate.getDate() + 1); document.cookie = `username=John; expires=${expirationDate.toUTCString()}`;
2.指定可訪問cookie的路徑
在設(shè)置Cookie時,可以使用path
參數(shù)來指定可訪問該cookie的路徑。path
參數(shù)用于限制cookie在哪個路徑下有效。只有與指定路徑匹配的URL才能訪問該Cookie。
以下是設(shè)置Cookie時指定路徑的示例:
document.cookie = "username=John; path=/example";
在上面的示例中,將"username"的cookie設(shè)置為只能在以/example開頭的URL路徑下訪問。比如,只有/example、/example/page1、/example/page2等路徑下的頁面才能讀取這個cookie。
默認(rèn)情況下,如果不指定path參數(shù),cookie的默認(rèn)路徑是設(shè)置cookie的頁面所在的路徑。例如,如果在http://example.com/login頁面設(shè)置了一個Cookie,則該Cookie的默認(rèn)路徑為/login。
需要注意的是,每個路徑都是一個獨立的上下文,cookie只能在其設(shè)置的路徑及其子路徑下訪問。如果路徑設(shè)置不正確,可能導(dǎo)致cookie無法在預(yù)期的頁面訪問或被刪除。
因此,在設(shè)置Cookie時,根據(jù)實際需求合理指定path參數(shù),以確保cookie在預(yù)期的路徑下有效。
3.指定可訪問cookie的主機(jī)名
在設(shè)置cookie時,可以使用domain參數(shù)來指定可訪問該cookie的主機(jī)名。domain參數(shù)用于限制cookie在哪個主機(jī)名下有效。只有與指定主機(jī)名匹配的URL才能訪問該cookie。
以下是設(shè)置cookie時指定主機(jī)名的示例:
document.cookie = "username=John; domain=example.com";
在上面的示例中,將"username"的cookie設(shè)置為只能在example.com主機(jī)名下的所有URL訪問。這意味著,只有example.com以及其子域名(如subdomain.example.com)下的頁面才能讀取這個Cookie。
默認(rèn)情況下,如果不指定domain參數(shù),cookie的默認(rèn)主機(jī)名是設(shè)置Cookie的頁面所屬的主機(jī)名。例如,在http://example.com/login頁面設(shè)置了一個cookie,則該Cookie的默認(rèn)主機(jī)名為example.com。
需要注意的是,通過指定domain參數(shù)來限制cookie的主機(jī)名時,需要遵循一些規(guī)則:
- 主機(jī)名必須具有兩個或更多的域名部分。例如,example.com是有效的,但.com或localhost是無效的。
- 主機(jī)名的設(shè)置僅適用于子域名,而無法在父域名下設(shè)置cookie。
因此,在設(shè)置cookie時,根據(jù)實際需求合理指定domain參數(shù),以確保cookie在預(yù)期的主機(jī)名下有效。
二、讀取cookie
需要在服務(wù)器環(huán)境下讀?。ǐ@?。?cookie 同樣使用document.cookie即可,該屬性會返回一個字符串,字符串中包含除 max-age、expires、path 和 domain 等屬性之外的所有 cookie 信息
讀取cookie 的值,它會返回一個以分號分隔的鍵值對字符串,包含當(dāng)前在瀏覽器中存儲的所有cookie 。要獲取特定cookie 的值,需要解析該字符串。
為了獲取單個 cookie 的值,我們可以通過 split() 函數(shù)將包含 cookie 信息的字符串拆分為數(shù)組,然后再獲取某個 cookie 的值,
以下是一個獲取名為"username"的Cookie值的示例:
function getCookie(name) { const cookieString = document.cookie; const cookies = cookieString.split('; '); for (const cookie of cookies) { const [cookieName, cookieValue] = cookie.split('='); if (cookieName === name) { return cookieValue; } } return null; } const username = getCookie('username');
也可以通過正則表達(dá)式
document.cookie = "name=張三"; let cookie = document.cookie; let key ='name' let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"); console.log(cookie.match(reg)[2])
三、刪除cookie
刪除 cookie 與修改 cookie 類似,只需要重新將 cookie 的值設(shè)置為空,并將 expires 屬性設(shè)置為一個過去的日期即可
以下是一個刪除名為"username"的cookie 的示例:
const expirationDate = new Date(); expirationDate.setDate(expirationDate.getDate() - 1); document.cookie = 'username=; expires=${expirationDate.toUTCString()}';
需要注意的是,cookie 存儲在瀏覽器中,可以被用戶修改或刪除。cookie 還有一些限制,例如每個域名下的cookie數(shù)量和存儲大小都有限制。
在實際開發(fā)中,除了使用原生JavaScript操作cookie ,還可以使用現(xiàn)代JavaScript框架和庫提供的cookie 管理工具,如js-cookie、universal-cookie等,以簡化cookie 的操作和管理。
四、 封裝構(gòu)造通用的cookie處理函數(shù)
cookie的處理過程比較復(fù)雜,并具有一定的相似性。因此可以定義幾個函數(shù)來完成cookie的通用操作,從而實現(xiàn)代碼的復(fù)用。下面列出了常用的cookie操作及其函數(shù)實現(xiàn)。
//設(shè)置cookie function setCookie(obj,time){ let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString(); for(let key in obj){ document.cookie = key+"="+obj[key]+"; expires="+ date; } }, //讀取cookie function getCookie(key){ return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2] }, //刪除cookie function removeCookie(key){ setCookie({[key]: "" }, -1) }
總結(jié)
到此這篇關(guān)于JS cookie的設(shè)置、讀取和刪除方法的文章就介紹到這了,更多相關(guān)JS cookie設(shè)置、讀取和刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法,結(jié)合實例形式分析了javascript結(jié)合HTML5 date元素進(jìn)行時間運算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時return false 的區(qū)別
這篇文章主要介紹了JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時return false 的區(qū)別,非常不錯,需要的朋友可以參考下2016-08-08JS報錯Uncaught?TypeError:?XXX?is?not?a?function的解決方法
這篇文章主要給大家介紹了關(guān)于JS報錯Uncaught?TypeError:?XXX?is?not?a?function的解決方法,本來好好的,突然就出現(xiàn)的錯誤,不過這并不是什么難解決的錯誤,需要的朋友可以參考下2023-08-08javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02基于javascript實現(xiàn)最簡單的選項卡切換效果
這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05