HTML5 storage提供了一種方式讓網站能夠把資訊儲存到你本地的計算機上，並再以後需要的時候進行獲取。這個概念和cookie相似，區別是它是為了更大容量儲存設計的。

 HTML5storage提供了一種方式讓網站能夠把資訊儲存到你本地的計算機上，並再以後需要的時候進行獲取。這個概念和cookie相似，區別是它是為了更大容量儲存設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候cookie都會被髮送過去。HTML5的storage是儲存在你的計算機上，網站在頁面載入完畢後可以通過Javascript來獲取這些資料。

1、sessionStorage

檢測

!!window.sessionStorage;

常用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

1.	window.sessionStorage.name = 'rainman';           // 賦值  
2.	window.sessionStorage.setItem('name','cnblogs');  // 賦值  
3.	window.sessionStorage.getItem('name');            // 取值  
4.	window.sessionStorage.removeItem('name');         // 移除值  
5.	window.sessionStorage.clear();                    // 刪除所有sessionStorage  
 

事件：

window.onstorage

檢測值得變化，瀏覽器支援不好。

說明：

1. cookie的儲存限制在了4k之內，相比來說，session storage有了更大的儲存空間，但至於具體多大，這要參照瀏覽器廠商的具體實現。
2. cookie有一個機制，就是在每次客戶端請求伺服器的時候都會將cookie傳送給伺服器，這無疑會做很多不必要的操作，因為並不是每次請求伺服器都需要cookie的所有資訊，而session storage很好的解決了這個問題，它不是採取自動傳送的方式，這樣就減少了不必要的工作。
3. 通過sessionStorage所儲存資料的生命週期，和Session類似，關閉瀏覽器（或標籤頁）後資料就不存在了。但重新整理頁面或使用“前進”、“後退按鈕”後sessionStorage仍然存在。
4. session storage每個視窗的值都是獨立的（每個視窗都有自己的資料），它的資料會隨著視窗的關閉而消失，視窗間的sessionStorage也是不可以共享的。
5. setItem中的key、value使用的是字串的形式進行儲存的。也就是說如果有如下的程式碼：setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預期的6(整數)，而是’16’(字串)。
6. 再次使用setItem設定已經存在的key的value時，新的值將替代舊的值。
7. 當儲存中的資料發生改變時，會觸發相應的事件（window.onstorage），但目前各瀏覽器對此事件的支援並不完善，暫時可以忽略。

2、localStorage

檢測

!!window.localStorage;

方法和sessionStorage相同

說明：

1. local storage把只把資料儲存在了客戶端使用，不會發送的伺服器上（除非你故意這樣做）。
2. 而且對於某一個域下來說，local storage是共享的（多個視窗共享一個“資料庫”）。
3. localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

舉例

1.	//結合JSON.stringify使用更強大  
2.	var person = {'name': 'rainman', 'age': 24};  
3.	localStorage.setItem("me", JSON.stringify(person));  
4.	JSON.parse(localStorage.getItem('me')).name;    // 'rainman'  
5.	  
6.	/** 
7.	 * JSON.stringify，將JSON資料轉化為字串 
8.	 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}' 
9.	 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]' 
10.	 * JSON.parse，反解JSON.stringify 
11.	 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"] 
12.	 */  

3、Database Storage

對簡單的資料儲存，使用sessionStorage和localStorage能夠很好地完成，但是在對瑣碎的關係資料進行處理之外，它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 介面的應用所在。

A、開啟連結

1.	var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 開啟連結  
2.	if(!db) { alert("Failed to connect to database."); }                         // 檢測連線是否建立成功  

以上程式碼建立了一個數據庫物件 db，名稱是 Todo，版本編號為0.1。db 還帶有描述資訊和大概的大小值。如果需要，這個大小是可以改變的，所以沒有必要預先假設允許使用者使用多少空間。

絕不可以假設該連線已經成功建立，即使過去對於某個使用者它是成功的。為什麼一個連線會失敗，存在多個原因。也許使用者代理出於安全原因拒絕你的訪問，也許裝置儲存有限。面對活躍而快速進化的潛在使用者代理，對使用者的機器、軟體及其能力作出假設是非常不明智的行為。比如，當用戶使用手持裝置時，他們可自由處置的資料可能只有幾兆位元組。

B、執行查詢

1.	db.transaction( function(tx) {   
2.	    tx.executeSql(  
3.	        "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
4.	        ['lebel', new Date().getTime()],   
5.	        function(tx2, result){ alert('成功'); },   
6.	        function(tx2, error){ alert('失敗:' + error.message); }  
7.	    );   
8.	});   

1. 執行SQL語句使用database.transaction()函式，該函式只有一個引數，負責執行查詢的函式。
2. 該函式具有一個型別事務的引數（tx）。
3. 該事務引數（tx）具有一個函式：executeSql()。這個函式使用四個引數：
   表示查詢的SQL字串；插入到查詢中問號所在處的字串資料；一個成功時執行的函式；一個失敗時執行的函式。
4. 執行成功的函式有兩個引數：tx2，事務性引數；result，執行的返回結果，結構如圖
   
5. 執行成功的函式也有兩個引數：tx2，事務性引數；error，錯誤物件，結構如圖 
   

C、其它

• Chrome支援； firefox（測試時版本4.01）不支援；IE8不支援。

D、示例

1.	//建立資料庫  
2.	var db = openDatabase("users", "1.0", "使用者表", 1024 * 1024);   
3.	if(!db){  
4.	    alert("Failed to connect to database.");   
5.	} else {  
6.	    alert("connect to database 'K'.");   
7.	}  
8.	  
9.	// 建立表  
10.	db.transaction( function(tx) {   
11.	    tx.executeSql(  
12.	        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",   
13.	        [],   
14.	        function(){ alert('建立users表成功'); },   
15.	        function(tx, error){ alert('建立users表失敗:' + error.message); }  
16.	    );  
17.	});   
18.	  
19.	// 插入資料  
20.	db.transaction(function(tx) {   
21.	    tx.executeSql(  
22.	        "INSERT INTO users (id, name) values(?, ?)",   
23.	        [Math.random(), 'space'],   
24.	        function(){ alert('插入資料成功'); },   
25.	        function(tx, error){ alert('插入資料失敗: ' + error.message);}  
26.	    );   
27.	});   
28.	  
29.	// 查詢  
30.	db.transaction( function(tx) {   
31.	    tx.executeSql(  
32.	        "SELECT * FROM users", [],    
33.	         function(tx, result) {  
34.	            var rows = result.rows, length = rows.length, i=0;  
35.	            for(i; i < length; i++) {   
36.	                alert(  
37.	                    'id=' + rows.item(i)['id'] +   
38.	                    'name='+ rows.item(i)['name']  
39.	                );   
40.	            }   
41.	        },   
42.	        function(tx, error){  
43.	            alert('Select Failed: ' + error.message);  
44.	        }  
45.	    );   
46.	});   
47.	  
48.	// 刪除表  
49.	db.transaction(function (tx) {    
50.	    tx.executeSql('DROP TABLE users');   
51.	}); 

4、globalStorage

這個也是html5中提出來，在瀏覽器關閉以後，使用globalStorage儲存的資訊仍能夠保留下來，localStorage一樣，域中任何一個頁面儲存的資訊都能被所有的頁面共享

基本語法

• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個名稱空間儲存物件來進行讀和寫。
• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網頁都可以通過這個名稱空間儲存物件來進行讀和寫。
• globalStorage['org'] —— 在.org域名下面的所有網頁都可以通過這個名稱空間儲存物件來進行讀和寫。
• globalStorage[''] —— 在任何域名下的任何網頁都可以通過這個名稱空間儲存物件來進行讀和寫

方法屬性

• setItem(key, value) —— 設定或重置 key 值。
• getItem(key) —— 獲取 key 值。
• removeItem(key) —— 刪除 key 值。
• 設定 key 值：window.globalStorage["planabc.net"].key = value;
• 獲取 key 值：value = window.globalStorage["planabc.net"].key;

其它

• 過期時間同 localStorage，其它的一些特性也和localStorage相似。
• 現在Firefox只支援當前域下的globalStorage儲存， 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。

5、相容性