javascript
083_JavaScript Cookies
1. 什么是cookie?
1.1. Cookie 是在您的計算機上存儲在小的文本文件中的數(shù)據(jù)。
1.2. 當web服務(wù)器向瀏覽器發(fā)送網(wǎng)頁后, 連接被關(guān)閉, 服務(wù)器會忘記用戶的一切。
1.3. Cookie是為了解決"如何記住用戶信息"而發(fā)明的:
- 當用戶訪問網(wǎng)頁時, 他的名字可以存儲在cookie中。
- 下次用戶訪問該頁面時, cookie會"記住"他的名字。
1.4. 當瀏覽器從服務(wù)器請求一個網(wǎng)頁時, 將屬于該頁的cookie添加到該請求中。這樣服務(wù)器就獲得了必要的數(shù)據(jù)來"記住"用戶的信息。
1.5. 如果瀏覽器已關(guān)閉本地cookie支持, 則以下實例均無法工作。
2. 通過JavaScript創(chuàng)建cookie
2.1. JavaScript可以用document.cookie屬性創(chuàng)建、讀取、刪除cookie。
2.2. 通過JavaScript, 可以這樣創(chuàng)建cookie:
document.cookie = "username=Bill Gates";2.3. 您還可以添加有效日期(UTC 時間)。默認情況下, 在瀏覽器關(guān)閉時會刪除cookie:
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";2.4. 通過path參數(shù), 您可以告訴瀏覽器cookie屬于什么路徑。默認情況下, cookie屬于當前頁。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";3. 通過JavaScript讀取cookie
3.1.通過JavaScript, 可以這樣讀取cookie:
var x = document.cookie;3.2. document.cookie會在一條字符串中返回所有cookie, 比如:
cookie1=value; cookie2=value; cookie3=value;4. 通過JavaScript改變cookie
4.1. 通過使用JavaScript, 你可以像你創(chuàng)建cookie一樣改變它:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";4.2. 通過重新賦值, 新的cookie值覆蓋舊的cookie值。
5. 通過JavaScript刪除cookie
5.1. 刪除cookie非常簡單, 刪除cookie時不必指定cookie值, 直接把expires參數(shù)設(shè)置為過去的日期即可:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";5.2. 您應(yīng)該定義cookie路徑以確保刪除正確的cookie。如果你不指定路徑, 一些瀏覽器不會讓你刪除cookie。
6. 例子
6.1. 新建一個Web項目
6.2. 編寫Cookie.html
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>JavaScript Cookies</title><script type="text/javascript">var name = 'uName';function setCookie(cname,cvalue,exdays) {var d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));var expires = "expires=" + d.toGMTString();document.cookie = encodeURIComponent(cname + "=" + cvalue + ";" + expires + ";path=/");}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 "";}function checkCookie() {var user = getCookie(name);if (user != "") {alert("再次歡迎您，" + user);} else {user = prompt("請輸入姓名：","");if (user != "" && user != null) {setCookie(name, user, 30);}} }</script></head><body onload="checkCookie()"></body> </html>6.3. 效果圖
總結(jié)
以上是生活随笔為你收集整理的083_JavaScript Cookies的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 082_Timing事件
- 下一篇： 058_JavaScript函数argu