回復“前端”即可獲贈前端相關(guān)學(xué)習資料
Cookies 讓你在網(wǎng)頁(yè)中存儲用戶(hù)信息。
Cookie是數據,存儲在小文本文件中,在計算機上。
當Web服務(wù)器向瀏覽器發(fā)送網(wǎng)頁(yè)時(shí),連接被關(guān)閉,服務(wù)器會(huì )忘記用戶(hù)的一切。Cookie是為了解決“如何記住用戶(hù)信息”而發(fā)明的。
當用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí),他的名字可以存儲在cookie中。下次用戶(hù)訪(fǎng)問(wèn)頁(yè)面時(shí),cookie“記住”他的名字。
Cookie保存在名稱(chēng)值(name:value)對中。
username = John Doe當瀏覽器從服務(wù)器請求一個(gè)網(wǎng)頁(yè)時(shí),將屬于該頁(yè)的cookie添加到該請求中。這樣服務(wù)器就獲得了必要的數據來(lái)“記住”用戶(hù)的信息。
JavaScript可以創(chuàng )建、讀取、刪除cookie,用document.cookie屬性。
使用JavaScript,Cookie可以像這樣創(chuàng )建:
document.cookie = "username=John Doe";可以添加一個(gè)到期日期(UTC時(shí)間)。默認情況下,在瀏覽器關(guān)閉時(shí)刪除cookie:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";使用路徑參數,您可以告訴瀏覽器cookie屬于什么路徑。默認情況下,cookie屬于當前頁(yè)。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";使用JavaScript,cookie可以這樣讀取。
var x = document.cookie;document.cookie 將返回所有cookie在一個(gè)字符串。像: cookie1=value; cookie2=value;cookie3=value;
使用JavaScript, 你可以修改cookie,像使用創(chuàng )建它的方法一樣。
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";舊的cookie被覆蓋。
刪除cookie非常簡(jiǎn)單。
刪除cookie時(shí)不必指定cookie值,只需將過(guò)期參數設置為已過(guò)期的日期。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";應該定義cookie路徑以確保刪除正確的cookie。如果不指定路徑,一些瀏覽器不會(huì )讓你刪除cookie。
將創(chuàng )建一個(gè)cookie來(lái)存儲訪(fǎng)問(wèn)者的名稱(chēng),訪(fǎng)客第一次到達網(wǎng)頁(yè)時(shí),會(huì )要求他填寫(xiě)姓名。然后將該名稱(chēng)存儲在cookie中。
下次訪(fǎng)客到達同一頁(yè)時(shí),他會(huì )收到一封歡迎消息。
首先,創(chuàng )建一個(gè)函數,將訪(fǎng)問(wèn)者的名字存儲在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=/";}

函數解析:
上面函數的三個(gè)參數分別是:cookie的名稱(chēng)(cname),cookie的值(cvalue),還有cookie過(guò)期的天數。
函數根據參數創(chuàng )建cookie并設置過(guò)期參數。
然后,創(chuàng )建一個(gè)函數返回指定cookie的值:
<script>getCookie("username");function getCookie(cname) {var allcookies = document.cookie;cookieArr = allcookies.split(';');for(var i = 0; i < cookieArr.length; i++) {var cookiePair = cookieArr[i].split("=");if(cname == cookiePair[0].trim()) {document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);}}}</script>

最后,創(chuàng )建檢查cookie是否設置的函數。
如果cookie被設置,它將顯示一個(gè)問(wèn)候。
如果沒(méi)有設置Cookie,它會(huì )顯示一個(gè)提示框,詢(xún)問(wèn)用戶(hù)的名字,通過(guò)調用setCookie函數,并存儲用戶(hù)名cookie365天。
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);}}}
兩者合在一起效果展示。:

本文基于JavaScript 基礎。主要介紹了瀏覽器中的cookies應該如何去調用,如何去創(chuàng )建自己的cookies,(設置cookies 獲取cookies。檢查cookies)等等一系列常見(jiàn)的問(wèn)題都做了詳細的講解。
希望能夠幫助讀者更好的學(xué)習。
------------------- End -------------------
聯(lián)系客服