HTML5

本地存儲詳解

 

在網上看到大牛寫的以爲值得學習，分享給你們

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

一、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），但目前各瀏覽器對此事件的支持並不完善，暫時能夠忽略。

二、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.  */

 

三、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不支持。