在沒介紹正文之前,先給大家介紹Cookie的基礎知識
首先了解什麼是cookie
“cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過浏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。”
cookie 是訪問過的網站創建的文件,用於存儲浏覽信息,例如個人資料信息。
從JavaScript的角度看,cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中,用於客戶端計算機與服務器之間傳遞信息。
在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由於 cookie 多用在客戶端和服務端之間進行通信,所以除了JavaScript以外,服務端的語言(如PHP)也可以存取 cookie。
Cookie 基礎知識
cookie 是有大小限制的,每個 cookie 所存放的數據不能超過4kb,如果 cookie 字符串的長度超過4kb,則該屬性將返回空字符串。
由於 cookie 最終都是以文件形式存放在客戶端計算機中,所以查看和修改 cookie 都是很方便的,這就是為什麼常說 cookie 不能存放重要信息的原因。
每個 cookie 的格式都是這樣的:<cookie名>=<值>;名稱和值都必須是合法的標示符。
cookie 是存在有效期的。在默認情況下,一個 cookie 的生命周期就是在浏覽器關閉的時候結束。如果想要 cookie 能在浏覽器關掉之後還可以使用,就必須要為該 cookie 設置有效期,也就是 cookie 的失效日期。
alert(typeof document.cookie)結果是 string,曾經我以為是array,還鬧過笑話...囧
cookie 有域和路徑這個概念。域就是domain的概念,因為浏覽器是個注意安全的環境,所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念,一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問,而不能被其他目錄下得網頁訪問(這句話有點繞,一會看個例子就好理解了)。
其實創建cookie的方式和定義變量的方式有些相似,都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ,而多個 cookie 可以存放在同一個cookie 文件中。
Cookie常見問題
cookie 存在兩種類型:
你浏覽的當前網站本身設置的cookie
來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用信息)
剛剛基礎知識裡面有說到 cookie 生命周期的問題,其實 cookie 大致可分為兩種狀態:
臨時性質的cookie。當前使用的過程中網站會儲存一些你的個人信息,當浏覽器關閉後這些信息也會從計算機中刪除
設置失效時間的cookie。就算浏覽器關閉了,這些信息業依然會在計算機中。如 登錄名稱和密碼,這樣無須在每次到特定站點時都進行登錄。這種cookie 可在計算機中保留幾天、幾個月甚至幾年。
cookie 有兩種清除方式:
通過浏覽器工具清除 cookie (有第三方的工具,浏覽器自身也有這種功能)
通過設置 cookie 的有效期來清除 cookie
注:刪除 cookie 有時可能導致某些網頁無法正常運行
浏覽器可以通過設置來接受和拒絕訪問 cookie。
出於功能和性能的原因考慮,建議盡量降低 cookie 的使用數量,並且要盡量使用小 cookie。
關於cookie編碼的細節問題將會在cookie高級篇中單獨介紹。
假如是本地磁盤中的頁面,chrome的控制台是無法用JavaScript讀寫操作 cookie 的,解決辦法...換一個浏覽器^_^。
本章節分享幾段關於javascript對於cookie的簡單操作,比如對於cookie的寫入和刪除。
代碼很簡單,比較適合對於cookie基本操作還不太熟練的朋友參考。
一.寫入cookie:
//兩個參數,一個是cookie的名子,一個是值 function SetCookie(name,value){ var Days = 30;//此 cookie 將被保存 30 天 var exp = new Date();//new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); }
二.讀取cookie:
//取cookies函數 function getCookie(name){ var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) return unescape(arr[2]); return null; }
三.刪除cookie:
//刪除cookie function delCookie(name){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); }