cookie也叫HTTP Cookie，最初是客戶端與服務(wù)器端進(jìn)行會(huì)話使用的。比如，會(huì)員登錄，下次回訪網(wǎng)站時(shí)無須登錄了；或者是購物車，購買的商品沒有及時(shí)付款，過兩天發(fā)現(xiàn)購物車?yán)镞€有之前的商品列表。
HTTP Cookie要求服務(wù)器對(duì)任意HTTP請(qǐng)求發(fā)送Set-Cookie，因此，Cookie的處理原則上需要在服務(wù)器環(huán)境下進(jìn)行。當(dāng)然，現(xiàn)在大部分瀏覽器在客戶端也能實(shí)現(xiàn)Cookie的生成和獲取。(目前Chrome不可以在客戶端操作，其他瀏覽器均可)
完整格式為：
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
中括號(hào)是可選，name=value是必選。
document.cookie = 'user=' + encodeURIComponent('冬哥');? //編碼寫入
alert(decodeURIComponent(document.cookie));? ? ? ? ? ? //解碼讀取
expires=date 失效時(shí)間，如果沒有聲明，則為瀏覽器關(guān)閉后即失效。聲明了失效時(shí)間，那么時(shí)間到期后方能失效。
PS：可以通過Firefox瀏覽器查看和驗(yàn)證失效時(shí)間。如果要提前刪除cookie也非常簡單，只要重新創(chuàng)建cookie把時(shí)間設(shè)置當(dāng)前時(shí)間之前即可：date.getDate() - 1或new Date(0)。
var date = new Date();? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建一個(gè)
date.setDate(date.getDate() + 14);
document.cookie = "user= " + encodeURIComponent('冬哥') +";expires=" + date;
path=path 訪問路徑，當(dāng)設(shè)置了路徑，那么只有設(shè)置的那個(gè)路徑文件才可以訪問cookie。
var path = '/D:/%E5%86%AC%E5%93%A5/hhh';
document.cookie = "user= " + encodeURIComponent('冬哥') + ";path=" + path;
domain=domain 訪問域名，用于限制只有設(shè)置的域名才可以訪問，那么沒有設(shè)置，會(huì)默認(rèn)限制為創(chuàng)建cookie的域名。
var domain = 'www.520ly.com';
document.cookie = "user= " + encodeURIComponent('冬哥') + ";domain=" + domain;
PS：如果定義了www.520ly.com，那么在這個(gè)域名下的任何網(wǎng)頁都可訪問，如果定義了m.520ly.com，那么只能在這個(gè)二級(jí)域名訪問該cookie，而主域名和其他子域名則不能訪問。
PS：設(shè)置域名，必須在當(dāng)前域名綁定的服務(wù)器上設(shè)置，如果在520mg.com服務(wù)器上隨意設(shè)置其他域名，則會(huì)無法創(chuàng)建cookie。
secure 安全設(shè)置，指明必須通過安全的通信通道來傳輸(HTTPS)才能獲取cookie。
document.cookie = "user= " + encodeURIComponent('冬哥') + ";secure";
alert(encodeURIComponent('冬哥'));--------%E5%86%AC%E5%93%A5
alert(decodeURIComponent('%E5%86%AC%E5%93%A5'));-------冬哥
PS：https安全通信鏈接需要單獨(dú)配置。
JavaScript設(shè)置、讀取和刪除并不是特別的直觀方便，我們可以封裝成函數(shù)來方便調(diào)用。
創(chuàng)建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date)? {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';}
document.cookie = cookieText;
}
常見setcookie? ? name? value? exprises?
function setCookie(name, value, iDay)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
獲取cookie
方法一：
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(
document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
方法二:
function getCookie(name) //獲取cookie
{
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++)
{
var arr2=arr[i].split('=');
if (arr2[0]==name)
{return arr2[1];}
}
return ' ';
}
刪除cookie
1.
function removeCookie(name) //刪除cookie
{
setCookie(name, 1, -1);
}
2.
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
失效天數(shù)，直接傳一個(gè)天數(shù)即可
function setCookieDate(day) {
if (typeof day == 'number' && day > 0) {
var date = new Date();
date.setDate(date.getDate() + day);
} else {
throw new Error('傳遞的day必須是一個(gè)天數(shù)，必須比0大');
}
return date;
}
突然就想上串代碼！
setCookie('userName', 'dongge', 365);
setCookie('password', '123456', 14);
alert(document.cookie);
輸出 userName=dongge; password=123456
removeCookie('userName');
alert(document.cookie);
輸出 password=123456;?
alert(getCookie("userName"));
輸出 dongge;
cookie局限性
cookie雖然在持久保存客戶端用戶數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)。但是還有很多局限性的。
第一：每個(gè)特定的域名下最多生成20個(gè)cookie（根據(jù)不同的瀏覽器有所區(qū)別）。
1.IE6或更低版本最多20個(gè)cookie
2.IE7和之后的版本最多可以50個(gè)cookie。IE7最初也只能20個(gè)，之后因被升級(jí)不定后增加了。
3.Firefox最多50個(gè)cookie
4.Opera最多30個(gè)cookie
5.Safari和Chrome沒有做硬性限制。
PS：為了更好的兼容性，所以按照最低的要求來，也就是最多不得超過20個(gè)cookie。當(dāng)超過指定的 cookie時(shí)，瀏覽器會(huì)清理掉早期的cookie。IE和Opera會(huì)清理近期最少使用的cookie，F(xiàn)irefox會(huì)隨機(jī)清理cookie。
第二：cookie的最大大約為4096字節(jié)(4k)，為了更好的兼容性，一般不能超過4095字節(jié)即可。
第三：cookie存儲(chǔ)在客戶端的文本文件，所以特別重要和敏感的數(shù)據(jù)是不建議保存在cookie的。比如銀行卡號(hào)，用戶密碼等。
Web存儲(chǔ)
在比較高版本的瀏覽器，JavaScript提供了sessionStorage和localStorage
通過方法存儲(chǔ)和獲取
localStorage.setItem('name', '曾慶林');
alert(localStorage.getItem('name'));
通過屬性存儲(chǔ)和獲取
localStorage.book = '曾慶林';
alert(localStorage.book);
刪除存儲(chǔ)
localStorage.removeItem('name');
