一篇文章帶你了解JavaScript cookies
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
Cookies 讓你在網(wǎng)頁中存儲用戶信息。
一、什么是Cookies?
Cookie是數(shù)據(jù)，存儲在小文本文件中，在計(jì)算機(jī)上。
當(dāng)Web服務(wù)器向?yàn)g覽器發(fā)送網(wǎng)頁時，連接被關(guān)閉，服務(wù)器會忘記用戶的一切。Cookie是為了解決“如何記住用戶信息”而發(fā)明的。
當(dāng)用戶訪問網(wǎng)頁時，他的名字可以存儲在cookie中。下次用戶訪問頁面時，cookie“記住”他的名字。
Cookie保存在名稱值(name:value)對中。
username = John Doe當(dāng)瀏覽器從服務(wù)器請求一個網(wǎng)頁時，將屬于該頁的cookie添加到該請求中。這樣服務(wù)器就獲得了必要的數(shù)據(jù)來“記住”用戶的信息。
二、使用JavaScript創(chuàng)建一個Cookie
JavaScript可以創(chuàng)建、讀取、刪除cookie，用document.cookie屬性。
使用JavaScript，Cookie可以像這樣創(chuàng)建:
document.cookie = "username=John Doe";可以添加一個到期日期（UTC時間）。默認(rèn)情況下，在瀏覽器關(guān)閉時刪除cookie:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";使用路徑參數(shù)，您可以告訴瀏覽器cookie屬于什么路徑。默認(rèn)情況下，cookie屬于當(dāng)前頁。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";三、使用JavaScript讀一個cookie
使用JavaScript，cookie可以這樣讀取。
var x = document.cookie;document.cookie 將返回所有cookie在一個字符串。像: cookie1=value; cookie2=value;cookie3=value;
四、使用JavaScript更改cookie
使用JavaScript, 你可以修改cookie，像使用創(chuàng)建它的方法一樣。
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";舊的cookie被覆蓋。
五、使用JavaScript刪除Cookie
刪除cookie非常簡單。
刪除cookie時不必指定cookie值，只需將過期參數(shù)設(shè)置為已過期的日期。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";應(yīng)該定義cookie路徑以確保刪除正確的cookie。如果不指定路徑，一些瀏覽器不會讓你刪除cookie。
六、JavaScript Cookie 實(shí)例
將創(chuàng)建一個cookie來存儲訪問者的名稱，訪客第一次到達(dá)網(wǎng)頁時，會要求他填寫姓名。然后將該名稱存儲在cookie中。
下次訪客到達(dá)同一頁時，他會收到一封歡迎消息。
1. 設(shè)置cookie值
首先，創(chuàng)建一個函數(shù)，將訪問者的名字存儲在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=/";}
函數(shù)解析:
上面函數(shù)的三個參數(shù)分別是：cookie的名稱（cname），cookie的值(cvalue)，還有cookie過期的天數(shù)。
函數(shù)根據(jù)參數(shù)創(chuàng)建cookie并設(shè)置過期參數(shù)。
2. 獲得cookie值
然后，創(chuàng)建一個函數(shù)返回指定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>
3. 函數(shù)檢查cookie值
最后，創(chuàng)建檢查cookie是否設(shè)置的函數(shù)。
如果cookie被設(shè)置，它將顯示一個問候。
如果沒有設(shè)置Cookie，它會顯示一個提示框，詢問用戶的名字，通過調(diào)用setCookie函數(shù)，并存儲用戶名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);}}}
兩者合在一起效果展示。：
七、總結(jié)
本文基于JavaScript 基礎(chǔ)。主要介紹了瀏覽器中的cookies應(yīng)該如何去調(diào)用，如何去創(chuàng)建自己的cookies,（設(shè)置cookies 獲取cookies。檢查cookies）等等一系列常見的問題都做了詳細(xì)的講解。
希望能夠幫助讀者更好的學(xué)習(xí)。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_回復(fù)【入群】
萬水千山總是情，點(diǎn)個【在看】行不行