您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript創(chuàng)建、更改和刪除Cookie的方法”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
Cookie是計(jì)算機(jī)上存儲(chǔ)在小文本文件中的數(shù)據(jù)。當(dāng)Web服務(wù)器將網(wǎng)頁(yè)發(fā)送到瀏覽器時(shí),連接將關(guān)閉,服務(wù)器將忘記用戶的所有內(nèi)容。發(fā)明Cookie是為了解決“如何記住用戶信息”的問(wèn)題:
當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí),他/她的名字可以存儲(chǔ)在cookie中。
下次用戶訪問(wèn)該頁(yè)面時(shí),cookie會(huì)“記住”他/她的名字。
Cookie以鍵值對(duì)形式保存,如:
username = John Doe
當(dāng)瀏覽器從服務(wù)器請(qǐng)求網(wǎng)頁(yè)時(shí),屬于該頁(yè)面的cookie將添加到請(qǐng)求中。這樣,服務(wù)器獲取必要的數(shù)據(jù)以“記住”有關(guān)用戶的信息。
如果您的瀏覽器已關(guān)閉本地Cookie支持,則以下示例均無(wú)效。
JavaScript可以使用document.cookie屬性創(chuàng)建,讀取和刪除cookie。使用JavaScript,可以像這樣創(chuàng)建一個(gè)cookie:
document.cookie = "username=John Doe";
您還可以添加到期日期(以UTC時(shí)間為單位)。默認(rèn)情況下,在瀏覽器關(guān)閉時(shí)刪除cookie:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
使用path參數(shù),您可以告訴瀏覽器cookie屬于哪個(gè)路徑。默認(rèn)情況下,cookie屬于當(dāng)前頁(yè)面。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
使用JavaScript,cookie可以像這樣讀取:
var x = document.cookie;
document.cookie將返回一個(gè)字符串中的所有cookie,如:cookie1 = value; cookie2 =值; cookie3 =值;
使用JavaScript,您可以像創(chuàng)建cookie一樣更改cookie:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
舊cookie被覆蓋。
刪除cookie非常簡(jiǎn)單。刪除cookie時(shí),不必指定cookie值。只需將expires參數(shù)設(shè)置為傳遞日期:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您應(yīng)該定義cookie路徑以確保刪除正確的cookie。如果您未指定路徑,某些瀏覽器將不允許您刪除cookie。
document.cookie屬性看起來(lái)像普通的文本字符串。但事實(shí)并非如此。即使你將一個(gè)完整的cookie字符串寫(xiě)入document.cookie,當(dāng)你再次讀出它時(shí),你只能看到它的名稱 - 值對(duì)。如果您設(shè)置了新cookie,則不會(huì)覆蓋較舊的cookie。新的cookie被添加到document.cookie,所以如果你再次閱讀document.cookie,你會(huì)得到類似的東西:cookie1 = value; cookie2 = value;
如果要查找一個(gè)指定cookie的值,則必須編寫(xiě)一個(gè)JavaScript函數(shù)來(lái)搜索cookie字符串中的cookie值。
在下面的示例中,我們將創(chuàng)建一個(gè)存儲(chǔ)訪客姓名的cookie。訪問(wèn)者第一次到達(dá)網(wǎng)頁(yè)時(shí),將要求他/她填寫(xiě)他/她的姓名。然后將名稱存儲(chǔ)在cookie中。下次訪問(wèn)者到達(dá)同一頁(yè)面時(shí),他/她將收到歡迎信息。在這個(gè)例子中,我們將創(chuàng)建3個(gè)JavaScript函數(shù):
用于設(shè)置cookie值的函數(shù)
獲取cookie值的函數(shù)
用于檢查cookie值的函數(shù)
設(shè)置Cookie的功能
首先,我們創(chuàng)建一個(gè)函數(shù)將訪問(wèn)者的名稱存儲(chǔ)在cookie變量中:
function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }
示例說(shuō)明:
上述函數(shù)的參數(shù)是cookie的名稱(cname),cookie的值(cvalue)以及cookie到期之前的天數(shù)(exdays)。該函數(shù)通過(guò)將cookiename,cookie值和expires字符串相加來(lái)設(shè)置cookie。
獲取Cookie的功能
然后,我們創(chuàng)建一個(gè)function返回指定cookie的值:
function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; }
功能說(shuō)明:
將cookiename作為參數(shù)(cname)。使用要搜索的文本(cname +“=”)創(chuàng)建變量(名稱)。解碼cookie字符串,處理帶有特殊字符的cookie,例如'$'將分號(hào)上的document.cookie拆分為名為ca的數(shù)組(ca = decodingCookie.split(';'))。循環(huán)通過(guò)ca數(shù)組(i = 0; i < ca.length; i ++),并讀出每個(gè)值c = ca [i])。如果找到cookie(c.indexOf(name)== 0),則返回cookie的值(c.substring(name.length,c.length))。如果找不到cookie,則返回“”。
檢查Cookie的功能
最后,我們創(chuàng)建一個(gè)函數(shù)來(lái)檢查是否設(shè)置了cookie。如果設(shè)置了cookie,它將顯示問(wèn)候語(yǔ)。如果未設(shè)置cookie,它將顯示一個(gè)提示框,詢問(wèn)用戶的名稱,并通過(guò)調(diào)用setCookie函數(shù)將用戶名cookie存儲(chǔ)365天:
function checkCookie() { var username = getCookie("username"); if (username != "") { alert("Welcome again " + username); } else { username = prompt("Please enter your name:", ""); if (username != "" && username != null) { setCookie("username", username, 365); } } }
所有代碼都在一起實(shí)現(xiàn)
function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie() { var user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:", ""); if (user != "" && user != null) { setCookie("username", user, 365); } } }
上面的示例checkCookie()在頁(yè)面加載時(shí)運(yùn)行該函數(shù)。
“JavaScript創(chuàng)建、更改和刪除Cookie的方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(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)容。