Web存儲機制

Web Storage的兩個主要目標：
提供一種在cookie以外存儲會話數據的途徑。
提供一種存儲大量能夠跨會話存在的數據的機制。

最初的Web Storage規範包含了兩種對象的定義：sessionStorage和globalStorage。這兩個對象在支持的瀏覽器中都是以window對象屬性的形式存在的。

1.Storage

Storage類型提供最大的存儲空間來存儲名值對。storage的實例與其餘對象相似，有以下方法：

clear():刪除全部值;Firefox中沒有實現。
getItem(name):根據指定的名字name獲取相應的值。
key(index):得到index位置處的值的名字。
removeItem(name):刪除由name指定的名值對。
setItem(name,value):爲指定的name設置一個對應的值。

還可使用length屬性來判斷有多少名值對存放在Storage對象中。

2.sessionStorage

sessionStorage對象存儲特定於某個會話的數據，也就是改數據只保持到瀏覽器關閉。這個對象就像會話cookie，也會在瀏覽器關閉後消失。

由於seesionStorage對象綁定與某個服務器會話，因此當文件在本地運行的時候是不可用的。存儲在sessionStorage中的數據只能由最初給對象存儲數據的頁面訪問到，因此對多頁面應用有限制。

因爲sessionStorage對象實際上是Storage的一個實例，因此可使用setItem()或者直接設置新的屬性來存儲數據。

例如：

sessionStorage.setItem('name','nicholas')sessionStorage.book = 'professional javascript'複製代碼

sessionStorage中游數據時，可使用getItem()或者經過直接訪問屬性名來獲取數據。兩種方法的例子以下：

var name =  sessionStorage.getItem('name');var book = sessionStorage.book複製代碼

還能夠經過length屬性和key方法來迭代sessionStorage的值。首先經過key方法獲取指定位置上的名字，而後在經過getItem()找出對應該名字的值。

也能夠用for-in循環來迭代sessionStorage的值。

要刪除sessionStorage中的數據，可使用delete操做符，也能夠調用removeItem方法

其中removeItem方法是兼容各類瀏覽器的。

sessionStorage對象應該主要用於僅針對繪畫的小段數據的存儲。若是須要跨越會話存儲數據，那麼globalStorage或者localStorage更爲合適。

3.globalStorage對象

globalStorage的目的是跨越會話存儲數據，但有特定的訪問限制。要使用globalStorage，首先要制定哪些域能夠訪問改數據。能夠經過方括號標記使用屬性來實現。例以下面例子：

//保存數據globalStorage['wrox.com'].name = 'nicholas'//獲取數據var name = globalStorage['wrox.com'].name複製代碼

在這裏，訪問的是針對域名wrox.com的存儲空間。globalStorage對象不是Storage的實例，而具體的globalStorage[''wrox.com']纔是。這個存儲空間對於wrox.com極其全部子域都是能夠訪問的。也能夠指定子域名。

對globalStorage空間的訪問，是依據發起請求的頁面的域名、協議和端口來限制的。例如，若是使用HTTPS協議在wrox.com中存儲了數據，那麼經過HTTP訪問的wrox.com的頁面就不能訪問該數據。一樣,不一樣端口間即便協議相同也不能共享數據。相似於ajax請求的同源策略。

若是實現不能肯定域名，那麼使用location.host做爲屬性名比較安全。

若是不適用removeItem()或者deletet刪除，或者用戶未清除瀏覽器緩存，存儲在globalStorage屬性中的數據會一直保留在磁盤上， 這讓globalStorage很是適合在客戶端存儲文檔或者長期保存用戶偏好設置。

4.localStorage對象

localStorage做爲持久保存在客戶端數據的方案取代了globalStorage。與globalStorage不一樣，不能給localStorage指定任何訪問限制；規則實現就設定好了。要訪問同一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。這至關於globalStorage[location.host]。

因爲localStorage是Storage的實例，因此能夠像使用sessionStorage同樣來使用它。

localStorage中的數據和存儲在globalStorage中的數據同樣，都遵循相同的規則：數據保留到經過JavaScript刪除或者是用戶請求瀏覽器緩存。

5.storage事件

對Storage對象進項任何修改，都會在文檔上觸發storage事件。這個事件的event對象有如下屬性：

domain：發生變化的存儲空間的域名。
key：設置或者刪除的鍵名。
newValue：若是是設置值，則是新值；若是是刪除鍵，則是null。
oldValue：鍵被修改以前的值。

不管對sessionStorage、globalStorage仍是localStorage進行操做，都會觸發storage事件，但不作區分。

6.限制

localStorage大多數桌面瀏覽器會設置每一個來源5mb的限制。

Chrome和Safari對每一個來源的限制是2.5MB。而IOS版Safari和Android版WebKit都有限制，也都是2.5MB。IE8+和Opera對sessionStorage的限制是5MB。