學(xué)習(xí)要點(diǎn)：
1.cookies

2.cookies 局限性

3.其他存儲(chǔ)

隨著 Web 越來越復(fù)雜，開發(fā)者急切的需要能夠本地化存儲(chǔ)的腳本功能。這個(gè)時(shí)候，第一個(gè)出現(xiàn)的方案：cookie 誕生了。cookie 的意圖是：在本地的客戶端的磁盤上以很小的文件形式保存數(shù)據(jù)。
一．Cookies
cookies 也叫 HTTP Cookies， 最初是客戶端與服務(wù)器端進(jìn)行會(huì)話使用的。 比如， 會(huì)員登錄，下次回訪網(wǎng)站時(shí)無須登錄了； 或者是購物車， 購買的商品沒有及時(shí)付款， 過兩天發(fā)現(xiàn)購物車
里還有之前的商品列表。
HTTP Cookies 要求服務(wù)器對(duì)任意 HTTP 請(qǐng)求發(fā)送 Set-Cookie，因此，Cookie 的處理原則上需要在服務(wù)器環(huán)境下進(jìn)行。當(dāng)然，現(xiàn)在大部分瀏覽器在客戶端也能實(shí)現(xiàn) Cookie 的生成和獲取。(目前 Chrome 不可以在客戶端操作，其他瀏覽器均可)
cookies 的組成
cookies 由名/值對(duì)形式的文本組成：name=value。完整格式為：

name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]  

中括號(hào)是可選，name=value 是必選。

document.cookie = 'user=' + encodeURIComponent('ranzige'); //編碼寫入   
alert(decodeURIComponent(document.cookie)); //解碼讀取  

expires=date 失效時(shí)間，如果沒有聲明，則為瀏覽器關(guān)閉后即失效。聲明了失效時(shí)間，那么時(shí)間到期后方能失效。

var date = new Date(); //創(chuàng)建一個(gè)   
date.setDate(date.getDate() + 7);
document.cookie = "user= " + encodeURIComponent('ranzige') +";expires=" + date;  

PS： 可以通過 Firefox 瀏覽器查看和驗(yàn)證失效時(shí)間。 如果要提前刪除 cookie 也非常簡(jiǎn)單，只要重新創(chuàng)建 cookie
把時(shí)間設(shè)置當(dāng)前時(shí)間之前即可：date.getDate() - 1 或 new Date(0)。
path=path 訪問路徑， 當(dāng)設(shè)置了路徑，
那么只有設(shè)置的那個(gè)路徑文件才可以訪問 cookie。

var path = '/E:/%E5%A4%87%E8%AF%BE%E7%AC%94%E8%AE%B0/JS1/29/demo';
document.cookie = "user= " + encodeURIComponent('ranzige') + ";path=" + path;  

PS：為了操作方便，我直接把路徑復(fù)制下來，并且增加了一個(gè)目錄以強(qiáng)調(diào)效果。
domain=domain
訪問域名，用于限制只有設(shè)置的域名才可以訪問，那么沒有設(shè)置，會(huì)默認(rèn)限制為創(chuàng)建 cookie 的域名。

var domain = 'cnblogs.com';
document.cookie = "user= " + encodeURIComponent('ranzige') + ";domain=" + domain;  

PS：如果定義了 cnblogs.com，那么在這個(gè)域名下的任何網(wǎng)頁都可訪問，如果定義了dotnet.cnblogs.com，那么只能在這個(gè)二級(jí)域名訪問該
cookie，而主域名和其他子域名則不能訪問。
PS：設(shè)置域名，必須在當(dāng)前域名綁定的服務(wù)器上設(shè)置，如果在 cnblogs.com
服務(wù)器上隨意設(shè)置其他域名，則會(huì)無法創(chuàng)建 cookie。
secure 安全設(shè)置，指明必須通過安全的通信通道來傳輸(HTTPS)才能獲取 cookie。

document.cookie = "user= " + encodeURIComponent('ranzige') + ";secure";  

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;
}  

//獲取 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;
}  

//刪除 cookie

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;
}  

二．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)，用戶密碼等。
三．其他存儲(chǔ)
IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù)，叫做 userData，從
IE5.0 就開始支持。每個(gè)數(shù)據(jù)最多 128K，每個(gè)域名下最多 1M。這個(gè)持久化數(shù)據(jù)存放在緩存中，如果緩存沒有清理，那么會(huì)一直存在。

<div style="behavior:url(#default#userData)" id="box"></div>
addEvent(window, 'load', function () {
var box = document.getElementById('box');
box.setAttribute('name', encodeURIComponent('chaoyi'));
box.expires = setCookieDate(7);
box.save('bookinfo');
//box.removeAttribute('name'); //刪除 userDate   
//box.save('bookinfo');   
box.load('bookinfo');
alert(decodeURIComponent(box.getAttribute('name')));
});  

PS：這個(gè)數(shù)據(jù)文件也是保存在 cookie 目錄中，只要清除 cookie 即可。如果指定過期日期，則到期后自動(dòng)刪除，如果沒有指定就是永久保存。
Web
存儲(chǔ)
在比較高版本的瀏覽器，JavaScript 提供了 sessionStorage 和 globalStorage。在 HTML5中提供了
localStorage 來取代 globalStorage。 而瀏覽器最低版本為： IE8+、 Firefox3.5+、 Chrome4+和
Opera10.5+。
PS：由于這三個(gè)對(duì)瀏覽器版本要求較高，我們就只簡(jiǎn)單的在 Firefox
了解一下，有興趣的可以通過關(guān)鍵字搜索查詢。
//通過方法存儲(chǔ)和獲取

sessionStorage.setItem('name', 'ranzge');
alert(sessionStorage.getItem('name'));  

//通過屬性存儲(chǔ)和獲取

sessionStorage.book = 'ranzige';
alert(sessionStorage.book);  

//刪除存儲(chǔ)

sessionStorage.removeItem('name');  

PS： 由于 localStorage 代替了 globalStorage， 所以在 Firefox、 Opera 和 Chrome
目前的最新版本已不支持。
//通過方法存儲(chǔ)和獲取

localStorage.setItem('name', 'ranzige');
alert(localStorage.getItem('name'));  

//通過屬性存儲(chǔ)和獲取

localStorage.book = 'ranzige';
alert(localStorage.book);  

//刪除存儲(chǔ)

localStorage.removeItem('name');  

PS：這三個(gè)對(duì)象都是永久保存的，保存在緩存里，只有手工刪除或者清理瀏覽器緩存方可失效。 在容量上也有一些限制， 主要看瀏覽器的差異， Firefox3+、
IE8+、 Opera 為 5M，Chrome 和 Safari 為 2.5M。