學習要點：
1.cookies

2.cookies 局限性

3.其他存儲

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

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

中括號是可選，name=value 是必選。

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

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

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

PS： 可以通過 Firefox 瀏覽器查看和驗證失效時間。 如果要提前刪除 cookie 也非常簡單，只要重新創(chuàng)建 cookie
把時間設置當前時間之前即可：date.getDate() - 1 或 new Date(0)。
path=path 訪問路徑， 當設置了路徑，
那么只有設置的那個路徑文件才可以訪問 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：為了操作方便，我直接把路徑復制下來，并且增加了一個目錄以強調效果。
domain=domain
訪問域名，用于限制只有設置的域名才可以訪問，那么沒有設置，會默認限制為創(chuàng)建 cookie 的域名。

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

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

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

PS：https 安全通信鏈接需要單獨配置。
JavaScript 設置、 讀取和刪除并不是特別的直觀方便，
我們可以封裝成函數(shù)來方便調用。
//創(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ù)，直接傳一個天數(shù)即可

function setCookieDate(day) {
if (typeof day == 'number' && day > 0) {
var date = new Date();
date.setDate(date.getDate() + day);
} else {
throw new Error('傳遞的 day 必須是一個天數(shù)，必須比 0 大');
}
return date;
}  

二．cookie 局限性
cookie 雖然在持久保存客戶端用戶數(shù)據提供了方便， 分擔了服務器存儲的負擔。
但是還有很多局限性的。
第一：每個特定的域名下最多生成 20 個 cookie（根據不同的瀏覽器有所區(qū)別） 。
1.IE6 或更低版本最多 20 個
cookie
2.IE7 和之后的版本最多可以 50 個 cookie。 IE7 最初也只能 20 個，
之后因被升級不定后增加了。
3.Firefox 最多 50 個 cookie
4.Opera 最多 30 個 cookie
5.Safari
和 Chrome 沒有做硬性限制。
PS：為了更好的兼容性，所以按照最低的要求來，也就是最多不得超過 20 個 cookie。
當超過指定的
cookie 時，瀏覽器會清理掉早期的 cookie。IE 和 Opera 會清理近期最少使用的 cookie，F(xiàn)irefox 會隨機清理
cookie。
第二：cookie 的最大大約為 4096 字節(jié)(4k)，為了更好的兼容性，一般不能超過 4095 字節(jié)即可。
第三：cookie
存儲在客戶端的文本文件，所以特別重要和敏感的數(shù)據是不建議保存在cookie
的。比如銀行卡號，用戶密碼等。
三．其他存儲
IE 提供了一種存儲可以持久化用戶數(shù)據，叫做 userData，從
IE5.0 就開始支持。每個數(shù)據最多 128K，每個域名下最多 1M。這個持久化數(shù)據存放在緩存中，如果緩存沒有清理，那么會一直存在。

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

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

//通過屬性存儲和獲取

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

//刪除存儲

sessionStorage.removeItem('name');  

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

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

//通過屬性存儲和獲取

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

//刪除存儲

localStorage.removeItem('name');  

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