摘要：數(shù)據(jù)并非存儲在一個安全環(huán)境中，其中包含的任何數(shù)據(jù)都可以被他人訪問。的兩個主要目標是提供一種在之外存儲會話數(shù)據(jù)的途徑提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制。

隨著Web應用程序的出現(xiàn)，產(chǎn)生了對于能夠直接在客戶端上存儲用戶信息能力的要求。比如登錄信息、偏好設定或其他數(shù)據(jù)，這個問題的第一個方案是以cookie的形式出現(xiàn)的，今天cookie只是在客戶端存儲數(shù)據(jù)的其中一種選項。

HTTP Cookie，通常直接叫做cookie，最初是在客戶端用于存儲會話信息的。該標準要求服務器對任意HTTP請求發(fā)送Set-Cookie HTTP頭作為響應的一部分，其中包含會話信息。例如，這種服務器響應的頭可能如下：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

這個HTTP響應設置以name為名稱、以value為值的一個cookie，名稱和值在傳送時都必須是URL編碼的。瀏覽器會存儲這樣的會話信息，并在這之后，通過為每個請求添加Cookie HTTP頭將信息發(fā)送回服務器，如下所示：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

發(fā)送回服務器的額外信息可以用于唯一驗證客服來自于發(fā)送的哪個請求。

限制

cookie在性質(zhì)上是綁定在特定的域名下的。當設定了一個cookie后，再給創(chuàng)建它的域名發(fā)送請求時，都會包含這個cookie。這個限制確保了存儲在cookie中的信息只能讓批準的接受者訪問，而無法被其他域訪問。由于cookie是存在客戶端計算機上的，還加入了一些限制確保cookie不會被惡意使用，同時不會占據(jù)太多磁盤空間。每個域的cookie總數(shù)是有限的，不過瀏覽器之間各有不同。如下所示：

IE6以及更低版本限制每個域名最多20個cookie。
IE7和之后版本每個域名最多50個。IE7最初是支持每個域名最大20個cookie之后被微軟的一個補丁所更新。
Firefox限制每個域最多50個cookie。
Opera限制每個域最多30個cookie。
Safari和Chrome對于每個域的cookie數(shù)量限制沒有硬性規(guī)定。

當超過單個域名限制之后還要再設置cookie，瀏覽器就會清除以前設置的cookie。IE和Opera會刪除最近最少使用過的（LRU,Least Recently Used）cookie，騰出空間給新設置的cookie。Firefox看上去好像是隨機決定要清除哪個cookie，所以考慮cookie限制非常重要，以免出現(xiàn)不可預期的后果。
瀏覽器中對呀cookie的尺寸也有限制。大多數(shù)瀏覽器都有大約4095B（含4095）以內(nèi)。尺寸限制影響到一個域下所有的cookie，而并非每個cookie多帶帶限制。
如果你嘗試創(chuàng)建超過最大尺寸限制的cookie，那么該cookie會被悄無聲息地丟掉。注意，雖然一個字符通常占用一字節(jié)，但是多字節(jié)情況則有所不同。

cookie的構成

cookie由瀏覽器保存的以下幾塊信息構成。

名稱：一個唯一確定cookie的名稱。cookie名稱是不區(qū)分大小寫的，所以myCookie和MyCookie被認為是同一個cookie。然而，實踐中最好將cookie名稱看作是區(qū)分大小寫的，因為某些服務器會這樣處理cookie。cookie的名稱必須是經(jīng)過URL編碼的。
值：儲存在cookie中的字符串值。值必須被URL編碼。
域：cookie對于哪個域是有效的。所有向該域發(fā)送的請求中都會包含這個cookie信息。這個值可以包含子域（subdomain，如www.wrox.com），也可以不包含它（如.wrox.com，則對于wrox.com的所有子域都有效）。如果沒有明確設定，那么這個域會被認作來自設置 cookie 的那個域。
路徑：對于指定域中的那個路徑，應該向服務器發(fā)送 cookie。例如，你可以指定 cookie 只有從http://www.wrox.com/books/ 中才能訪問，那么 http://www.wrox.com 的頁面就不會發(fā)送 cookie 信息，即使請求都是來自同一個域的。
失效時間：表示 cookie 何時應該被刪除的時間戳（也就是，何時應該停止向服務器發(fā)送這個cookie）。默認情況下，瀏覽器會話結(jié)束時即將所有 cookie 刪除；
         不過也可以自己設置刪除時間。這個值是個 GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定應該刪除cookie 的準確時間。因此，cookie 可在瀏覽器關閉后依然保存在用戶的機器上。如果你設置的失效日期是個以前的時間，則 cookie 會被立刻刪除。
安全標志：指定后，cookie 只有在使用 SSL 連接的時候才發(fā)送到服務器。例如，cookie 信息只能發(fā)送給 https://www.wrox.com，而 http://www.wrox.com 的請求則不能發(fā)送 cookie。

每一段信息都作為 Set-Cookie 頭的一部分，使用分號加空格分隔每一段，如下例所示。

HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com 
Other-header: other-header-value

該頭信息指定了一個叫做 name 的 cookie，它會在格林威治時間 2007 年 1 月 22 日 7:10:24 失效，同時對于 www.wrox.com 和 wrox.com 的任何子域（如 p2p.wrox.com）都有效。

secure 標志是 cookie 中唯一一個非名值對兒的部分，直接包含一個 secure 單詞。如下：
HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value; domain=.wrox.com; path=/; secure 
Other-header: other-header-value

這里，創(chuàng)建了一個對于所有 wrox.com 的子域和域名下（由 path 參數(shù)指定的）所有頁面都有效的cookie。因為設置了 secure 標志，這個 cookie 只能通過 SSL 連接才能傳輸。
尤其要注意，域、路徑、失效時間和 secure 標志都是服務器給瀏覽器的指示，以指定何時應該發(fā)送 cookie。這些參數(shù)并不會作為發(fā)送到服務器的 cookie 信息的一部分，只有名值對兒才會被發(fā)送。

JavaScript 中的 cookie

在JavaScript中處理cookie有些復雜，因為其眾所周知的蹩腳的接口，即BOM的document. cookie屬性。這個屬性的獨特之處在于它會因為使用它的方式不同而表現(xiàn)出不同的行為。當用來獲取屬性值時，document.cookie 返回當前頁面可用的（根據(jù) cookie 的域、路徑、失效時間和安全設置）所有 cookie的字符串，一系列由分號隔開的名值對兒，如下例所示。

name1=value1;name2=value2;name3=value3

**所有名字和值都是經(jīng)過 URL 編碼的，所以必須使用 decodeURIComponent()來解碼。
當用于設置值的時候，document.cookie 屬性可以設置為一個新的 cookie 字符串。這個 cookie 字符串會被解釋并添加到現(xiàn)有的 cookie 集合中。設置 document.cookie 并不會覆蓋 cookie，除非設置的cookie 的名稱已經(jīng)存在。設置 cookie 的格式如下，和 Set-Cookie 頭中使用的格式一樣。**

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure

這些參數(shù)中，只有 cookie 的名字和值是必需的。下面是一個簡單的例子。

document.cookie = "name=Nicholas";

這段代碼創(chuàng)建了一個叫 name 的 cookie，值為 Nicholas。當客戶端每次向服務器端發(fā)送請求的時候，都會發(fā)送這個 cookie；當瀏覽器關閉的時候，它就會被刪除。雖然這段代碼沒問題，但因為這里正好名稱和值都無需編碼，所以最好每次設置 cookie 時都像下面這個例子中一樣使用 encodeURIComponent()。

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");

要給被創(chuàng)建的 cookie 指定額外的信息，只要將參數(shù)追加到該字符串，和 Set-Cookie 頭中的格式一樣，如下所示。

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";

由于 JavaScript 中讀寫 cookie 不是非常直觀，常常需要寫一些函數(shù)來簡化 cookie 的功能。基本的cookie操作有三種：讀取、寫入和刪除。它們在 CookieUtil 對象中如下表示。

var CookieUtil = {
    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            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;
    },
    set: function (name, value, expires, path, domain, secure) { 
        var cookieText = encodeURIComponent(name) + "=" + 
                         encodeURIComponent(value); 
        if (expires instanceof Date) { 
            cookieText += "; expires=" + expires.toGMTString(); 
        } 
        if (path) { 
            cookieText += "; path=" + path; 
        }
        if (domain) { 
            cookieText += "; domain=" + domain; 
        } 
        if (secure) { 
            cookieText += "; secure"; 
        } 
        document.cookie = cookieText; 
    },
    unset: function (name, path, domain, secure){ 
         this.set(name, "", new Date(0), path, domain, secure); 
     }
}

CookieUtil.get()方法根據(jù) cookie 的名字獲取相應的值。它會在 document.cookie 字符串中查找 cookie 名加上等于號的位置。如果找到了，那么使用 indexOf()查找該位置之后的第一個分號（表示了該 cookie 的結(jié)束位置）。如果沒有找到分號，則表示該 cookie 是字符串中的最后一個，則余下的字符串都是 cookie 的值。該值使用 decodeURIComponent()進行解碼并最后返回。如果沒有發(fā)現(xiàn) cookie，則返回 null。
CookieUtil.set()方法在頁面上設置一個 cookie，接收如下幾個參數(shù)：cookie 的名稱，cookie 的值，可選的用于指定 cookie 何時應被刪除的 Date 對象，cookie 的可選的 URL 路徑，可選的域，以及可選的表示是否要添加 secure 標志的布爾值。參數(shù)是按照它們的使用頻率排列的，只有頭兩個是必需的。在這個方法中，名稱和值都使用encodeURIComponent()進行了URL編碼，并檢查其他選項。如果expires參數(shù)是 Date 對象，那么會使用 Date 對象的 toGMTString()方法正確格式化 Date 對象，并添加到expires 選項上。方法的其他部分就是構造 cookie 字符串并將其設置到 document.cookie 中。沒有刪除已有 cookie 的直接方法。所以，需要使用相同的路徑、域和安全選項再次設置 cookie，并將失效時間設置為過去的時間。CookieUtil.unset()方法可以處理這種事情。它接收 4 個參數(shù)：要刪除的 cookie 的名稱、可選的路徑參數(shù)、可選的域參數(shù)和可選的安全參數(shù)。這些參數(shù)加上空字符串并設置失效時間為 1970 年 1 月 1 日（初始化為 0ms 的 Date 對象的值），傳給 CookieUtil.set()。這樣就能確保刪除 cookie。可以像下面這樣使用上述方法。

//設置 cookie 
CookieUtil.set("name", "Nicholas"); 
CookieUtil.set("book", "Professional JavaScript"); 
//讀取 cookie 的值
alert(CookieUtil.get("name")); //"Nicholas" 
alert(CookieUtil.get("book")); //"Professional JavaScript" 
//刪除 cookie 
CookieUtil.unset("name"); 
CookieUtil.unset("book"); 
//設置 cookie，包括它的路徑、域、失效日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", 
 new Date("January 1, 2010")); 
//刪除剛剛設置的 cookie 
CookieUtil.unset("name", "/books/projs/", "www.wrox.com"); 
//設置安全的 cookie 
CookieUtil.set("name", "Nicholas", null, null, null, true); 
CookieExample01.htm 

這些方法通過處理解析、構造 cookie 字符串的任務令在客戶端利用 cookie 存儲數(shù)據(jù)更加簡單。

關于 cookie 的思考

由于所有的 cookie 都會由瀏覽器作為請求頭發(fā)送，所以在 cookie 中存儲大量信息會影響到特定域的請求性能。cookie 信息越大，完成對服務器請求的時間也就越長。盡管瀏覽器對 cookie 進行了大小限制，不過最好還是盡可能在 cookie 中少存儲信息，以避免影響性能。cookie 的性質(zhì)和它的局限使得其并不能作為存儲大量信息的理想手段，所以又出現(xiàn)了其他方法。一定不要在 cookie 中存儲重要和敏感的數(shù)據(jù)。cookie 數(shù)據(jù)并非存儲在一個安全環(huán)境中，其中包含的任何數(shù)據(jù)都可以被他人訪問。所以不要在 cookie 中存儲諸如信用卡號或者個人地址之類的數(shù)據(jù)。

cookie:存在瀏覽器里，容量有限，不安全（用戶和瀏覽器都能看到）
1.防篡改 2.加密
session：存在服務器，容量不用擔心，安全（用戶看不到）

session分為兩種：
常用的cookie-session 基于cookie實現(xiàn)
瀏覽器第一次訪問服務器的時候，服務器生成一個session的id，sess_id，服務器會把這個sess_id作為一個cookie還給瀏覽器
第二次訪問服務器，瀏覽器帶著cookie訪問服務器，服務器借助瀏覽器帶的sess_id來識別用戶。

Web Storage 最早是在 Web 超文本應用技術工作組（WHAT-WG）的 Web 應用 1.0 規(guī)范中描述的。這個規(guī)范的最初的工作最終成為了 HTML5 的一部分。Web Storage 的目的是克服由 cookie 帶來的一些限制，當數(shù)據(jù)需要被嚴格控制在客戶端上時，無須持續(xù)地將數(shù)據(jù)發(fā)回服務器。Web Storage 的兩個主要目標是：

提供一種在 cookie 之外存儲會話數(shù)據(jù)的途徑；
提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制。

**最初的 Web Storage 規(guī)范包含了兩種對象的定義：sessionStorage 和 globalStorage。這兩個對象在支持的瀏覽器中都是以 windows 對象屬性的形式存在的，支持這兩個屬性的瀏覽器包括 IE8+、Firefox 3.5+、Chrome 4+和 Opera 10.5+。
Firefox 2 和 3 基于早期規(guī)范的內(nèi)容部分實現(xiàn)了 Web Storage，當時只實現(xiàn)了globalStorage，沒有實現(xiàn) localStorage。**

Storage 類型

Storage 類型提供最大的存儲空間（因瀏覽器而異）來存儲名值對兒。Storage 的實例與其他對象類似，有如下方法。

clear()： 刪除所有值；Firefox 中沒有實現(xiàn) 。
getItem(name)：根據(jù)指定的名字 name 獲取對應的值。
key(index)：獲得 index 位置處的值的名字。
removeItem(name)：刪除由 name 指定的名值對兒。
setItem(name, value)：為指定的 name 設置一個對應的值。

其中，getItem()、removeItem()和 setItem()方法可以直接調(diào)用，也可通過 Storage 對象間接調(diào)用。因為每個項目都是作為屬性存儲在該對象上的，所以可以通過點語法或者方括號語法訪問屬性來讀取值，設置也一樣，或者通過 delete 操作符進行刪除。不過，我們還建議讀者使用方法而不是屬性來訪問數(shù)據(jù)，以免某個鍵會意外重寫該對象上已經(jīng)存在的成員。還可以使用 length 屬性來判斷有多少名值對兒存放在 Storage 對象中。但無法判斷對象中所有數(shù)據(jù)的大小，不過 IE8 提供了一個 remainingSpace 屬性，用于獲取還可以使用的存儲空間的字節(jié)數(shù)。Storage 類型只能存儲字符串。非字符串的數(shù)據(jù)在存儲之前會被轉(zhuǎn)換成字符串。

sessionStorage 對象

sessionStorage 對象存儲特定于某個會話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關閉。這個對象就像會話 cookie，也會在瀏覽器關閉后消失。存儲在 sessionStorage 中的數(shù)據(jù)可以跨越頁面刷新而存在，同時如果瀏覽器支持，瀏覽器崩潰并重啟之后依然可用（Firefox 和 WebKit 都支持，IE 則不行）。因為 seesionStorage 對象綁定于某個服務器會話，所以當文件在本地運行的時候是不可用的。存儲在 sessionStorage 中的數(shù)據(jù)只能由最初給對象存儲數(shù)據(jù)的頁面訪問到，所以對多頁面應用有限制。
由于 sessionStorage 對象其實是 Storage 的一個實例，所以可以使用setItem()或者直接設置新的屬性來存儲數(shù)據(jù)。下面是這兩種方法的例子。

//使用方法存儲數(shù)據(jù)
sessionStorage.setItem("name", "Nicholas"); 
//使用屬性存儲數(shù)據(jù)
sessionStorage.book = "Professional JavaScript"; 

不同瀏覽器寫入數(shù)據(jù)方面略有不同。Firefox 和 WebKit 實現(xiàn)了同步寫入，所以添加到存儲空間中的數(shù)據(jù)是立刻被提交的。而 IE 的實現(xiàn)則是異步寫入數(shù)據(jù)，所以在設置數(shù)據(jù)和將數(shù)據(jù)實際寫入磁盤之間可能有一些延遲。對于少量數(shù)據(jù)而言，這個差異是可以忽略的。對于大量數(shù)據(jù)，你會發(fā)現(xiàn) IE 要比其他瀏覽器更快地恢復執(zhí)行，因為它會跳過實際的磁盤寫入過程。在 IE8 中可以強制把數(shù)據(jù)寫入磁盤：在設置新數(shù)據(jù)之前使用 begin()方法，并且在所有設置完成之后調(diào)用 commit()方法。看以下例子。

//只適用于 IE8
sessionStorage.begin(); 
sessionStorage.name = "Nicholas"; 
sessionStorage.book = "Professional JavaScript"; 
sessionStorage.commit(); 

這段代碼確保了 name 和 book 的值在調(diào)用 commit()之后立刻被寫入磁盤。調(diào)用 begin()是為了確保在這段代碼執(zhí)行的時候不會發(fā)生其他磁盤寫入操作。對于少量數(shù)據(jù)而言，這個過程不是必需的；不過，對于大量數(shù)據(jù)（如文檔之類的）可能就要考慮這種事務形式的方法了。
sessionStorage 中有數(shù)據(jù)時，可以使用 getItem()或者通過直接訪問屬性名來獲取數(shù)據(jù)。兩種方法的例子如下。

//使用方法讀取數(shù)據(jù)
var name = sessionStorage.getItem("name"); 
//使用屬性讀取數(shù)據(jù)
var book = sessionStorage.book; 

還可以通過結(jié)合 length 屬性和 key()方法來迭代 sessionStorage 中的值，如下所示。

for (var i=0, len = sessionStorage.length; i < len; i++){ 
 var key = sessionStorage.key(i); 
 var value = sessionStorage.getItem(key); 
 alert(key + "=" + value); 
} 

它是這樣遍歷 sessionStorage 中的名值對兒的：首先通過 key()方法獲取指定位置上的名字，然后再通過 getItem()找出對應該名字的值。還可以使用 for-in 循環(huán)來迭代 sessionStorage 中的值：

for (var key in sessionStorage){ 
 var value = sessionStorage.getItem(key); 
 alert(key + "=" + value); 
} 

每次經(jīng)過循環(huán)的時候，key 被設置為 sessionStorage 中下一個名字，此時不會返回任何內(nèi)置方法或 length 屬性。
要從 sessionStorage 中刪除數(shù)據(jù)，可以使用 delete 操作符刪除對象屬性，也可調(diào)用removeItem()方法。以下是這些方法的例子。

//使用 delete 刪除一個值——在 WebKit 中無效
delete sessionStorage.name; 
//使用方法刪除一個值
sessionStorage.removeItem("book"); 

在撰寫本書時，delete 操作符在 WebKit 中無法刪除數(shù)據(jù)，removeItem()則可以在各種支持的瀏覽器中正確運行。
sessionStorage 對象應該主要用于僅針對會話的小段數(shù)據(jù)的存儲。如果需要跨越會話存儲數(shù)據(jù)，那么 globalStorage 或者 localStorage 更為合適。

localStorage 對象

由于 localStorage 是 Storage 的實例，所以可以像使用 sessionStorage 一樣來使用它。下面是一些例子。

//使用方法存儲數(shù)據(jù)
localStorage.setItem("name", "Nicholas"); 
//使用屬性存儲數(shù)據(jù)
localStorage.book = "Professional JavaScript"; 
//使用方法讀取數(shù)據(jù)
var name = localStorage.getItem("name"); 
//使用屬性讀取數(shù)據(jù)
var book = localStorage.book; 

存儲在 localStorage 中的數(shù)據(jù)保留到通過 JavaScript 刪除或者是用戶清除瀏覽器緩存。
為了兼容只支持 globalStorage 的瀏覽器，可以使用以下函數(shù)。

function getLocalStorage(){ 
 if (typeof localStorage == "object"){ 
 return localStorage; 
 } else if (typeof globalStorage == "object"){ 
 return globalStorage[location.host]; 
 } else { 
 throw new Error("Local storage not available."); 
 } 
} 

然后，像下面這樣調(diào)用一次這個函數(shù)，就可以正常地讀寫數(shù)據(jù)了。
var storage = getLocalStorage();

在確定了使用哪個 Storage 對象之后，就能在所有支持 Web Storage 的瀏覽器中使用相同的存取規(guī)則操作數(shù)據(jù)了。

storage 事件

對 Storage 對象進行任何修改，都會在文檔上觸發(fā) storage 事件。當通過屬性或 setItem()方法保存數(shù)據(jù)，使用 delete 操作符或 removeItem()刪除數(shù)據(jù)，或者調(diào)用 clear()方法時，都會發(fā)生該事件。這個事件的 event 對象有以下屬性。

domain：發(fā)生變化的存儲空間的域名。
key：設置或者刪除的鍵名。
newValue：如果是設置值，則是新值；如果是刪除鍵，則是 null。
oldValue：鍵被更改之前的值。

在這四個屬性中，IE8 和 Firefox 只實現(xiàn)了 domain 屬性。在撰寫本書的時候，WebKit 尚不支持
storage 事件：
以下代碼展示了如何偵聽 storage 事件：

EventUtil.addHandler(document, "storage", function(event){ 
     alert("Storage changed for " + event.domain); 
}); 

無論對 sessionStorage、globalStorage 還是 localStorage 進行操作，都會觸發(fā) storage事件，但不作區(qū)分。

限制

與其他客戶端數(shù)據(jù)存儲方案類似，Web Storage 同樣也有限制。這些限制因瀏覽器而異。一般來說，對存儲空間大小的限制都是以每個來源（協(xié)議、域和端口）為單位的。換句話說，每個來源都有固定大小的空間用于保存自己的數(shù)據(jù)。考慮到這個限制，就要注意分析和控制每個來源中有多少頁面需要保存數(shù)據(jù)。
對于 localStorage 而言，大多數(shù)桌面瀏覽器會設置每個來源 5MB 的限制。Chrome 和 Safari 對每個來源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
對 sessionStorage 的限制也是因瀏覽器而異。有的瀏覽器對 sessionStorage 的大小沒有限制，但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。IE8+和 Opera 對sessionStorage 的限制是 5MB。
有關 Web Storage 的限制，請參考 http://dev-test.nemikor.com/w...。