H5本地存儲詳細使用教程（localStorage + JSON數據存儲應用框架）

時間  2019-11-08
標籤 h5 本地 存儲 詳細 使用 教程 localstorage json 數據 應用 框架 欄目 JavaScript 简体版
原文   原文鏈接

 

 

 

 

 

H5本地存儲有兩個API，一個是Web Storage，還有一個是Web SQL。無論是哪個，都是基於JavaScript語言來使用，接下來我就教你怎麼使用H5本地存儲，本文篇幅較大，js代碼較多，請耐心閱讀。javascript

 

 

 

 

1、Web Storage教程

 

一、概述：html

對於Web Storage來講，其實是Cookies存儲的進化版。若是瞭解Cookie的人幾乎一看Web Storage就會用，若是你歷來沒用過沒了解過Cookie，不要緊，看了這篇文章照樣輕鬆玩轉Web Storage。首先，學習Web Storage只需背熟這句口訣：「兩個接口，四個函數」。


前端

二、口訣：java

（1）兩個接口：分別是localStorage和sessonStoragemysql

（2）四個函數：分別是setItem、getItem、removeItem和clear


程序員

三、localStorage：web

（1）特性：sql

     域內安全、永久保存。即客戶端或瀏覽器中來自同一域名的全部頁面均可訪問localStorage數據且數據除了刪除不然永久保存，但客戶端或瀏覽器之間的數據相互獨立。數據庫

（2）四個函數：編程

     A. localStorage.setItem      存儲數據信息到本地

     B. localStorage.getItem      讀取本地存儲的信息

     C. localStorage.removeItem   刪除本地存儲的信息

     D. localStorage.clear        清空因此存儲的信息

    

 

 四、sessonStorage：

 （1）特性：

      會話控制、短時間保存。會話概念與服務器端的session概念類似，短時間保存指窗口或瀏覽器或客戶端關閉後自動消除數據。

 （2）四個函數：

      A. sessionStorage.setItem       存儲數據信息到本地

      B. sessionStorage.getItem       讀取本地存儲的信息

      C. sessionStorage.removeItem    刪除本地存儲的信息

      D. sessionStorage.clear         清空因此存儲的信息

      

 

五、四個函數的用法：

（1）localStorage.setItem(鍵名，鍵值)

         在本地客戶端存儲一個字符串類型的數據，其中，第一個參數「鍵名」表明了該數據的標識符，而第二個參數「鍵值」爲該數據自己。如：

                 localStorage.setItem("coffeeType", "mocha");      //存儲鍵名爲coffeeType和鍵值爲mocha的數據到本地
                 localStorage.setItem("coffeePrice", "28");        //有了上一句作參考，這句意思你該理解了吧
     

（2）localStorage.getItem(鍵名)

         讀取已存儲在本地的數據，經過鍵名做爲參數讀取出對應鍵名的數據。如：

                 var data = localStorage.getItem("coffeeType");   //讀取對應鍵名爲coffeeType的數據

     
（3）localStorage.removeItem(鍵名)

         移除已存儲在本地的數據，經過鍵名做爲參數刪除對應鍵名的數據。如：

                 localStorage.removeItem("coffeeType");           //從本地存儲中移除鍵名爲coffeeType的數據
     
（4）localStorage.clear()

         移除本地存儲全部數據。如：

                 localStorage.clear();      //保存着的"coffeePrice/28"鍵/值對也被移除了，全部本地數據拜拜

 

     
（5）另外，sessionStorage中的四個函數與以上localStorage類的函數用法基本一致，就再也不詳解。

     

 

六、兼容問題：

有人會說本地存儲是H5的新貴，可是對於老、舊的瀏覽器來講怎麼辦？那就不用老古董瀏覽器唄，或者使用cookie做爲替代。由於大多使用localStorage是用來存儲字符串的，在其餘編譯型的語言看來，存儲字符串能作些什麼，但在javascript身上，舊大放光彩，能夠存儲JSON格式的字符串來擴展應用，能夠存儲類名變量值等等信息再經過eval()來感覺使用JS的快感。既然localStorage是存儲字符串的，那麼在老古董瀏覽器上，能夠經過使用Cookies來作替代方案並作好域內安全。



 

 

 

2、Web Storage應用

 

一、基本使用：

咱們先把上面的四個函數整理一下，並加入一段驗證代碼用於檢測本地的數據存儲的存在狀況。

 

（ localStorage 使用測試 ）

 

[javascript]  view plain  copy
 
 print?
  1. <script type="text/javascript">  
  2.   
  3.     localStorage.setItem("coffeeType", "mocha");  
  4.     localStorage.setItem("coffeePrice", "28");  
  5.   
  6.     verify();   //驗證本地存儲  
  7.     localStorage.removeItem("coffeeType");  
  8.     verify();   //驗證coffeeType是否存在  
  9.     localStorage.clear();  
  10.     verify();   //驗證coffeeType和coffeePrice是否存在  
  11.   
  12.     //自定義驗證函數，驗證coffeeType和coffeePrice的數據是否存在  
  13.     function verify(){  
  14.         var type = localStorage.getItem("coffeeType");  
  15.         var price = localStorage.getItem("coffeePrice");  
  16.         type = type ? type : '不存在';  
  17.         price = price ? price : '不存在';  
  18.   
  19.         alert( "coffeeType: " + type + "\n\n" + "coffeePrice: " + price );  
  20.     }  
  21. </script>  

 

若是上面代碼執行後彈出框提示不存在的話，那麼意味着本地不支持H5的 localStorage 本地存儲。那麼不支持怎麼辦，DON'T 擔憂，能夠寫一段代碼來兼容使用，請繼續看下去。

 

 

二、兼容使用：

在寫兼容代碼前，再來講一點關於Web Storage的內容，在Web Storage的兩個類中，咱們比較經常使用的是localStorage類，至於session的話就交給後臺去寫吧。可是localStorage類在不支持H5的時候使用不了，因此咱們將localStorage的四個函數封裝一下，使得當瀏覽器或客戶端不兼容localStorage時自動切換到Cookies存儲。

首先，要寫好一個操做cookie的類和函數，將四個函數的名字和參數還有功能和localStorage保持一致。正好，《JavaScript權威指南》第五版裏已經寫好了一個cookieStorage代碼，可是呢，這段代碼有BUG的，和稍微與localStorage不一致，因此我修改了一下，花了點時間造下輪子，代碼以下：

 

（ cookieStorage.js ）

 

[javascript]  view plain  copy
 
 print?
  1. //《JavaScript權威指南》一書中有實現基於cookie的存儲API，我把代碼敲下來  
  2. // 另外，書中的代碼有錯，如下爲無BUG版並修改爲1000天至關長的存儲時間  
  3. window.cookieStorage = (new (function(){  
  4.     var maxage = 60*60*24*1000;  
  5.     var path = '/';  
  6.   
  7.     var cookie = getCookie();  
  8.   
  9.     function getCookie(){  
  10.         var cookie = {};  
  11.         var all = document.cookie;  
  12.         if(all === "")  
  13.             return cookie;  
  14.         var list = all.split("; ");  
  15.         for(var i=0; i < list.length; i++){  
  16.             var cookies = list[i];  
  17.             var p = cookies.indexOf("=");  
  18.             var name = cookies.substring(0,p);  
  19.             var value = cookies.substring(p+1);  
  20.             value = decodeURIComponent(value);  
  21.             cookie[name] = value;  
  22.         }  
  23.         return cookie;  
  24.     }  
  25.   
  26.     var keys = [];  
  27.     for(var key in cookie)  
  28.         keys.push(key);  
  29.   
  30.     this.length = keys.length;  
  31.   
  32.     this.key = function(n){  
  33.         if(n<0 || n >= keys.length)  
  34.             return null;  
  35.         return keys[n];  
  36.     };  
  37.   
  38.     this.setItem = function(key, value){  
  39.         if(! (key in cookie)){  
  40.             keys.push(key);  
  41.             this.length++;  
  42.         }  
  43.   
  44.         cookie[key] = value;  
  45.         var cookies = key + "=" +encodeURIComponent(value);  
  46.         if(maxage)  
  47.             cookies += "; max-age=" + maxage;  
  48.         if(path)  
  49.             cookies += "; path=" + path;  
  50.   
  51.         document.cookie = cookies;  
  52.     };  
  53.   
  54.     this.getItem = function(name){  
  55.         return cookie[name] || null;  
  56.     };  
  57.   
  58.     this.removeItem = function(key){  
  59.         if(!(key in cookie))  
  60.             return;  
  61.   
  62.         delete cookie[key];  
  63.   
  64.         for(var i=0; i<keys.length; i++){  
  65.             if(keys[i] === key){  
  66.                 keys.splice(i, 1);  
  67.                 break;  
  68.             }  
  69.         }  
  70.         this.length--;  
  71.   
  72.         document.cookie = key + "=; max-age=0";  
  73.     };  
  74.   
  75.     this.clear = function(){  
  76.         for(var i=0; i<keys.length; i++)  
  77.             document.cookie = keys[i] + "; max-age=0";  
  78.         cookie = {};  
  79.         keys = [];  
  80.         this.length = 0;  
  81.     };  
  82. })());  

 


有了上面的cookieStorage函數，那就好辦了，只需 把localStorage跟cookieStorage整合在一塊兒 就完美了。

那麼開始動手，新建一個myStorage.js文件，把上面的cookieStorage代碼Copy進去，而後再開始寫如下代碼：

 

（ myStorage.js ）

 

[javascript]  view plain  copy
 
 print?
  1. //本地存儲，localStorage類沒有存儲空間的限制，而cookieStorage有存儲大小限制  
  2. //在不支持localStorage的狀況下會自動切換爲cookieStorage  
  3. window.myStorage = (new (function(){  
  4.   
  5.     var storage;    //聲明一個變量，用於肯定使用哪一個本地存儲函數  
  6.   
  7.     if(window.localStorage){  
  8.         storage = localStorage;     //當localStorage存在，使用H5方式  
  9.     }  
  10.     else{  
  11.         storage = cookieStorage;    //當localStorage不存在，使用兼容方式  
  12.     }  
  13.   
  14.     this.setItem = function(key, value){  
  15.         storage.setItem(key, value);  
  16.     };  
  17.   
  18.     this.getItem = function(name){  
  19.         return storage.getItem(name);  
  20.     };  
  21.   
  22.     this.removeItem = function(key){  
  23.         storage.removeItem(key);  
  24.     };  
  25.   
  26.     this.clear = function(){  
  27.         storage.clear();  
  28.     };  
  29. })());  

 

 

上面的代碼是myStorage.js，你能夠直接Copy。把作好的myStorage.js文件引入到HTML文檔後，用法就是跟localStorage的函數同樣，不信你試試：

 

（1）myStorage.setItem(鍵名，鍵值)

         在本地客戶端存儲一個字符串類型的數據，其中，第一個參數「鍵名」表明了該數據的標識符，而第二個參數「鍵值」爲該數據自己。如：

                 myStorage.setItem("coffeeType", "mocha");      //存儲鍵名爲coffeeType和鍵值爲mocha的數據到本地
                 myStorage.setItem("coffeePrice", "28");        //有了上一句作參考，這句意思你該理解了吧
     
（2）myStorage.getItem(鍵名)

         讀取已存儲在本地的數據，經過鍵名做爲參數讀取出對應鍵名的數據。如：

                 var data = myStorage.getItem("coffeeType");   //讀取對應鍵名爲coffeeType的數據
     
（3）myStorage.removeItem(鍵名)

         移除已存儲在本地的數據，經過鍵名做爲參數刪除對應鍵名的數據。如：

                 myStorage.removeItem("coffeeType");           //從本地存儲中移除鍵名爲coffeeType的數據
     
（4）myStorage.clear()

         移除本地存儲全部數據。如：

                 myStorage.clear();      //保存着的"coffeePrice/28"鍵/值對也被移除了，全部本地數據拜拜


仔細一看，你會發現，localStorage中的local改爲了my變成了myStorage，這個不得了啊，當客戶的使用環境不支持H5的時候，這個小小的變臉"my"但是會切換成cookie，有那麼點可能救你一命。不過爲了更加保命，你能夠造多一個輪子，當客戶環境不支持H5又不支持cookie時，輪子會自動把數據上傳到服務器來保存；若是客戶支持cookie，可是有按期清除的習慣，那麼你能夠作一個輪子來控制cookie時間，並在有限時間內把數據備份到服務，等等等等，看你怎麼發揮吧。

 

想省事的童鞋，能夠直接點擊下載myStorage.js.

 

H5本地存儲中，除了包含了localStorage和sessionStorage的Web Storage外，還有一個小衆的Web SQL，請看下文。

 

 

 



3、Web SQL教程



一、概述：

H5的本地存儲中，其實localStorage並不算是很強大的存儲，而Web SQL Database纔是牛逼的存在，在瀏覽器或客戶端直接能夠實現一個本地的數據庫應用，好比作一個我的的備忘錄啊，注意，是我的，爲何？由於世面上只有主流的瀏覽器實現了WebSQL功能，不少非主流並不兼容WebSQL，而且，所謂的主流只是編程開發人員眼中的主流，若是是用戶平時本身使用的那些亂七八糟的瀏覽器，WebSQL簡直是災難啊！！！另外，瀏覽器間對WebSQL的支持並不是爲規範，由於這個規範幾年前被官方放棄了。還有一個WebSQL不可以普遍使用的緣由是，大量前端工程師不懂數據庫也沒有上進心或好奇心或空閒時間去研究和學會應用WebSQL，致使了開發人員逃避WebSQL和用戶對WebSQL沒有使用習慣和各種客戶端對WebSQL兼容性良莠不齊等現象，是WebSQL不可以像服務器端的數據庫那麼普遍應用的主要緣由。

 

吐槽歸吐槽，教程仍是要寫的。先說學習口訣：「一個語言，三個函數」。



二、口訣：

（1）一個語言：無論是WebSQL仍是MySQL，SQL的語法必須掌握。SQL是一個結構化查詢語言，說白就是用來查詢數據的語言中是最天然、最簡潔的。

（2）三個函數：分別是：
        A. openDatabase    建立或打開一個本地的數據庫對象
        B. executeSql      執行SQL語句，在回調函數的參數中獲取執行結果
        C. transaction     處理事務，當一條語句執行失敗的時候，以前的執行所有失效


三、SQL：

（1）概述：               

          如下只是把每一個功能對應的最基本的SQL語句過一遍。若是不會SQL的，僅作簡單語法參考，有興趣的童鞋須要找資料系統性地全面學習。

（2）建立數據表：

         建立具備多個列，每一個列用於存放可不一樣類型的數據。有列天然有行的概念，行表明一組數據，每組數據是當行對應的多個列的數據集合。

         CREATE TABLE IF NOT EXISTS 表名(列名稱1 數據類型,  列名稱2 數據類型,  列名稱N 數據類型)

（3）查詢數據：

         從某表中查詢某行某列的數據或查詢表中全部元素。

         SELECT 列名稱1,列名稱2,列名稱3 FROM 表名稱 WHERE 某列名 = 某值

（4）插入數據：

         向某表中插入行數據，行中每一個值對應列名。

         INSERT INTO 表名(列名稱1, 列名稱2, 列名稱N) VALUES (值1, 值2, 值N)

（5）更新數據：

         更新某行中列的值。

         UPDATE 表名 SET 列名稱1=新值, 列名稱2=新值, 列名稱N=新值 WHERE 某列名 = 某值

（6）刪除數據：

         刪除某行，不然刪除全部數據。

         DELETE FROM 表名 WHERE 列名稱 = 值



四、Web SQL本地存儲的三個函數：

（1）openDatabase (數據庫名字, 數據庫版本號, 顯示名字, 數據庫保存數據的大小, 回調函數（可選）)

         不過是否一臉懵逼，好奇怪是否是，參數還要寫版本號，還有，顯示名字什麼鬼？不過，通過測試後，我都是直接這樣寫就是了（大小請本身定），以下：

          var db = openDatabase("MyDatabase", "", "My Database", 1024*1024);
     

（2）executeSql(查詢字符串, 用以替換查詢字符串中問號的參數, 執行成功回調函數（可選）, 執行失敗回調函數（可選）)

         參數一天然是SQL語句，其中值數據可用?代替；參數二是SQL語句中?對應的值（很像PDO的預處理）。注意，executeSql不能單獨使用，須要在事務transaction函數下使用。例子以下：

          executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)");


（3）transaction(包含事務內容的一個方法, 執行成功回調函數（可選）, 執行失敗回調函數（可選）)

         事務內容爲一個或多個executeSql函數構成。這個函數很難用語言表達，因此請看例子：

          db.transaction(function(tx){
             tx.executeSql("CREATE TABLE IF NOT EXISTS MyData(name TEXT,message TEXT,time INTEGER)", [], function(){                         alert("create ok")});
                 tx.executeSql("SELECT * FROM MyData", [], function(){alert("select ok")});
                 tx.executeSql("DROP TABLE IF EXISTS MyData", [], function(){alert("drop ok")});

           });

 

 

五、Web SQL的使用：

程序員最喜歡作的事情之一就是封裝，將代碼封裝成本身喜歡的樣子，而後在須要用到時會感謝當年封裝好的類或函數不須要再造輪子就直接修改着用。因此，我也不例外，把openDatabase、executeSql、transaction三個核心函數封裝成一個類。注意，這個類只是實現基本的功能，而且查詢我沒有寫條件查詢而是直接查詢所有結果。對封裝Web SQL有興趣的童鞋能夠研究一下如下代碼：

（沒興趣的請忽略，跳到第四條：H5本地存儲的框架程序）

 

（ webSQL.js ）

 

[javascript]  view plain  copy
 
 print?
  1. //回調函數，須要被賦值成函數，初始化爲null  
  2. var webSQL_create_handle = null;  
  3. var webSQL_insert_handle = null;  
  4. var webSQL_update_handle = null;  
  5. var webSQL_delete_handle = null;  
  6. var webSQL_select_handle = null;  
  7. var webSQL_drop_handle = null;  
  8.   
  9. //鏈接數據庫(數據庫名，數據大小)  
  10. function webSQL(database="MyDatabase", datasize=1024*1024){  
  11.     this.db = openDatabase(database, "", "My Database", datasize);  
  12. }  
  13. webSQL.prototype={  
  14.   
  15.     //做爲webSQL的原型  
  16.     constructor: webSQL,  
  17.   
  18.     //建立表，參數爲表名和列名  
  19.     create : function(table, allcol){  
  20.         var col = "";  
  21.         for(var i=0; i<allcol.length; i++){  
  22.             col += allcol[i];  
  23.   
  24.             if(i !== allcol.length-1){  
  25.                 col += ",";  
  26.             }  
  27.         }  
  28.         var sql = "CREATE TABLE IF NOT EXISTS "+table+"("+col+")";  
  29.         this.db.transaction(function(tx){  
  30.             tx.executeSql(sql,  
  31.                 [],  
  32.                 function(tx,rs){  
  33.                     console.log(tx,"建立表成功！");  
  34.                     if(webSQL_create_handle && typeof(webSQL_create_handle)=="function"){  
  35.                         webSQL_create_handle();  
  36.                     }  
  37.                 },  
  38.                 function(tx,error){  
  39.                     console.log(error,"建立表失敗！");  
  40.                 }  
  41.             );  
  42.         });  
  43.     },  
  44.   
  45.     //刪除表，參數爲表名  
  46.     drop : function(table){  
  47.         var sql = "DROP TABLE IF EXISTS "+table;  
  48.         this.db.transaction(function(tx){  
  49.             tx.executeSql(sql,  
  50.                 [],  
  51.                 function(tx,rs){  
  52.                     console.log(tx,"刪除表成功！");  
  53.                     if(webSQL_drop_handle && typeof(webSQL_drop_handle)=="function"){  
  54.                         webSQL_drop_handle();  
  55.                     }  
  56.                 },  
  57.                 function(tx,error){  
  58.                     console.log(error,"刪除表失敗！");  
  59.                 }  
  60.             );  
  61.         });  
  62.     },  
  63.   
  64.     //插入數據，表名，列名，對應列值  
  65.     insert : function(tableName, colNameArray, colValueArray){  
  66.         var allColName = "";  
  67.         var quesMark = "";  
  68.         for(var i=0; i<colNameArray.length; i++){  
  69.             if(colNameArray[i]){  
  70.                 allColName += colNameArray[i];  
  71.                 quesMark += "?";  
  72.                 if(i !== colNameArray.length-1){  
  73.                     allColName += ",";  
  74.                     quesMark += ",";  
  75.                 }  
  76.             }  
  77.         }  
  78.         var sql = "INSERT INTO "+tableName+"("+allColName+") VALUES ("+quesMark+")";  
  79.         this.db.transaction(function(tx){  
  80.             tx.executeSql(  
  81.                 sql,  
  82.                 colValueArray,  
  83.                 function(tx,rs){  
  84.                     console.log(tx,"插入數據成功！");  
  85.                     if(webSQL_insert_handle && typeof(webSQL_insert_handle)=="function"){  
  86.                         webSQL_insert_handle();  
  87.                     }  
  88.                 },  
  89.                 function(tx,error){  
  90.                     console.log(error,"插入數據失敗！");  
  91.                 }  
  92.             );  
  93.         });  
  94.     },  
  95.   
  96.     //更新數據，表名，列名，列值，條件列名，條件列值，條件關係，是否通配  
  97.     update : function(tableName, colNameArray, colValueArray, whereColName=null, whereColValue=null, relation="&&", equal="="){  
  98.         var colAndValue = "";  
  99.         for(var i=0; i<colNameArray.length; i++){  
  100.             if(colNameArray[i]){  
  101.                 colAndValue += (colNameArray[i] + "=?");  
  102.                 if(i !== colNameArray.length-1){  
  103.                     colAndValue += ",";  
  104.                 }  
  105.             }  
  106.         }  
  107.         var whereSyntax = "";  
  108.         if(whereColName){  
  109.             for(var j=0; j<whereColName.length; j++){  
  110.                 if(whereColName[j]){  
  111.                     if(j === 0){  
  112.                         whereSyntax += " WHERE ";  
  113.                     }  
  114.                     whereSyntax += (whereColName[j] + "" + equal + "?");  
  115.                     if(j !== whereColName.length-1){  
  116.                         whereSyntax += (" "+relation+" ");  
  117.                     }  
  118.                 }  
  119.             }  
  120.         }  
  121.         var fanalArray = new Array();  
  122.         for(var m=0; m<colValueArray.length; m++){  
  123.             if(colValueArray[m]){  
  124.                 fanalArray.push(colValueArray[m]);  
  125.             }  
  126.         }  
  127.         if(whereColValue){  
  128.             for(var n=0; n<whereColValue.length; n++){  
  129.                 if(whereColValue[n]){  
  130.                     fanalArray.push(whereColValue[n]);  
  131.                 }  
  132.             }  
  133.         }  
  134.         var sql = "UPDATE "+tableName+" SET "+colAndValue+""+whereSyntax;  
  135.         this.db.transaction(function(tx){  
  136.             tx.executeSql(  
  137.                 sql,  
  138.                 fanalArray,  
  139.                 function(tx,rs){  
  140.                     console.log(tx,"更新數據成功");  
  141.                     if(webSQL_update_handle && typeof(webSQL_update_handle)=="function"){  
  142.                         webSQL_update_handle();  
  143.                     }  
  144.                 },  
  145.                 function(tx,error){  
  146.                     console.log(error,"更新數據失敗！");  
  147.                 }  
  148.             );  
  149.         });  
  150.     },  
  151.   
  152.     //刪除數據，表名，條件列名，條件列值，條件關係，是否通配  
  153.     delete : function(tableName, whereColName=null, whereColValue=null, relation="&&", equal="="){  
  154.         var whereSyntax = "";  
  155.         if(whereColName){  
  156.             for(var j=0; j<whereColName.length; j++){  
  157.                 if(whereColName[j]){  
  158.                     if(j === 0){  
  159.                         whereSyntax += " WHERE ";  
  160.                     }  
  161.                     whereSyntax += (whereColName[j] + "" + equal + "?");  
  162.                     if(j !== whereColName.length-1){  
  163.                         whereSyntax += (" "+relation+" ");  
  164.                     }  
  165.                 }  
  166.             }  
  167.         }  
  168.         var fanalColValue = new Array();  
  169.         for(var n=0; n<whereColValue.length; n++){  
  170.             if(whereColValue[n]){  
  171.                 fanalColValue.push(whereColValue[n]);  
  172.             }  
  173.         }  
  174.         var sql = "DELETE FROM "+tableName+""+whereSyntax;  
  175.         this.db.transaction(function(tx){  
  176.             tx.executeSql(  
  177.                 sql,  
  178.                 fanalColValue,  
  179.                 function(tx,rs){  
  180.                     console.log(tx,"刪除數據成功！");  
  181.                     if(webSQL_delete_handle && typeof(webSQL_delete_handle)=="function"){  
  182.                         webSQL_delete_handle();  
  183.                     }  
  184.                 },  
  185.                 function(tx,error){  
  186.                     console.log(error,"刪除數據失敗！");  
  187.                 }  
  188.             );  
  189.         });  
  190.     },  
  191.   
  192.     //查詢全部數據  
  193.     select : function(tableName){  
  194.         var sql = "SELECT * FROM "+tableName;  
  195.         console.log("db",this.db);  
  196.         this.db.transaction(function(tx){  
  197.             tx.executeSql(  
  198.                 sql,  
  199.                 [],  
  200.                 function(tx,rs){  
  201.                     for(var i=0; i<rs.rows.length; i++){  
  202.                         console.log(rs.rows.item(i).name, rs.rows.item(i).value);  
  203.                     }  
  204.                     if(webSQL_select_handle && typeof(webSQL_select_handle)=="function"){  
  205.                         webSQL_select_handle(rs.rows);  
  206.                     }  
  207.                 },  
  208.                 function(tx,error){  
  209.                     console.log(error,"查詢失敗");  
  210.                 }  
  211.             );  
  212.         });  
  213.     }  
  214. }  

 

 

好長好長的代碼，看起來很長很臭，其實這個類很是易用，首先我要把這個類保存在js文件，我命名爲webSQL.js，而後須要把這個類引入到HTML文檔中使用，下面就是這個類的使用方法：

 

（ webSQL.js 使用測試 ）

 

[html]  view plain  copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>測試Web SQL數據庫</title>  
  6. </head>  
  7. <body>  
  8.     <div id="msg">  
  9.         <b>Test測試Web SQL</b><br><br><br>  
  10.     </div>  
  11.       
  12. <script src="webSQL.js"></script>  
  13.   
  14. <script type="text/javascript">  
  15.   
  16.         //自行根據需求，補充完整查詢執行後的回調函數，注意有帶參數，參數爲查詢結果  
  17.         webSQL_select_handle = function(rows){  
  18.             document.getElementById("msg").innerHTML += "正在讀取數據<br><br>";  
  19.             for(var i=0; i<rows.length; i++){  
  20.         //rows爲查詢結果，【rows.item(數據行號)】可獲得行數據，【rows.item(行號).字段名】可獲得行數據中的列字段的數據  
  21.                 document.getElementById("msg").innerHTML += ((i+1)+". name: "+rows.item(i).name + ", value: " + rows.item(i).value +"<br><br>");  
  22.             }  
  23.         };  
  24.   
  25.         //自行根據需求，補充完整新建數據表後的執行回調函數  
  26.         webSQL_create_handle = function(){  
  27.             document.getElementById("msg").innerHTML += "正在建立數據表<br><br>";  
  28.         };  
  29.   
  30.         //自行根據需求，補充完整插入數據後的執行回調函數  
  31.         webSQL_insert_handle = function(){  
  32.             document.getElementById("msg").innerHTML += "正在插入數據<br><br>";  
  33.         };  
  34.   
  35.         //自行根據需求，補充完整更新數據後的執行回調函數  
  36.         webSQL_update_handle = function(){  
  37.             document.getElementById("msg").innerHTML += "正在更新數據<br><br>";  
  38.         };  
  39.   
  40.         //自行根據需求，補充完整刪除數據後的執行回調函數  
  41.         webSQL_delete_handle = function(){  
  42.             document.getElementById("msg").innerHTML += "正在刪除數據<br><br>";  
  43.         };  
  44.   
  45.         //自行根據需求，補充完整刪除表後的執行回調函數  
  46.         webSQL_drop_handle = function(){  
  47.             document.getElementById("msg").innerHTML += "正在清空並刪除數據表<br><br>";  
  48.         }  
  49.   
  50.         //實例化webSQL類  
  51.         var db = new webSQL("MyDatabase");  
  52.   
  53.         //新建一個表，帶有兩個字段，分別爲name和value  
  54.         db.create("myTable", ["name", "value"]);  
  55.   
  56.         //插入兩個數據，分別是Coffe和me  
  57.         db.insert("myTable", ["name", "value"], ["Coffee", "me"]);  
  58.           
  59.         //插入兩個數據，分別是JavaScript和good  
  60.         db.insert("myTable", ["name", "value"], ["JavaScript", "good"]);  
  61.   
  62.         //查詢全部數據  
  63.         db.select("myTable");  
  64.   
  65.         //更新數據，將name字段爲Coffee的值更改成lhb  
  66.         db.update("myTable",["name"],["lhb"],["name"],["Coffee"]);  
  67.   
  68.         //查詢全部數據  
  69.         db.select("myTable");  
  70.   
  71.         //刪除name爲lhb的數據  
  72.         db.delete("myTable",["name"],["lhb"]);  
  73.   
  74.         //查詢全部數據  
  75.         db.select("myTable");  
  76.   
  77.         //刪除表  
  78.         db.drop("myTable");  
  79. </script>  
  80. </body>  
  81. </html>  

 

 

用法很是簡單是否是，直接往我寫好的函數傳參數便可，不過這段代碼只在Chrome谷歌瀏覽器測試經過，其餘瀏覽器沒試過，不肯定是否兼容其餘瀏覽器。



有須要webSQL.js庫的，能夠複製粘貼或點擊這裏下載，若是你須要很完整的SQL操做，請你參考着寫或找找其餘類庫（網上好多大神有封裝過WebSQL的），本文全部代碼皆只爲了供學習和參考，不適直接生產使用。


 

 

 

 

4、H5本地存儲的框架程序（重點）



一、localStorage類高級應用：

因爲並非全部瀏覽器都支持WebSQL，而localStorage有着不限量且長期保存在硬盤的特色，因此能夠將localStorage再改造，改形成爲具有有數據庫特色的應用。想要localStorage能具有數據庫這種類型的功能，那隻能依靠JSON來成大事了。JSON是文本、是語言、是對象、是數組，只要跟JS配合，簡直就是萬能的（誇張了）！因爲JSON實質上是字符串，因此經過localStorage存儲在本地十分方便，可是JSON又能夠經過JS轉化爲對象（現在幾乎全部語言都能解析JSON），因此小小字符串能成就無限可能。只要有想象力，JSON + JavaScript有強大的行動力。

   

扯遠了！咱們先來講說JSON如何使用：首先，到JSON官網下載 json2.js 文件並引入到HTML中；而後使用 JSON.stringify(js對象) 函數將js對象轉換成json字符串，或者使用 JSON.parse(json字符串) 函數將json字符串轉換成js對象。是否是很抽象？直接看代碼吧：

 

（JSON使用方法）

 

[html]  view plain  copy
 
 print?
  1. <script src="json2.js"></script>  
  2. <script type="text/javascript">  
  3.     var Obj = { name: 'Coffee', sex: 'man' };   //一個js對象  
  4.       
  5.     var Json = JSON.stringify(Obj);   //將js對象轉換成json字符串  
  6.       
  7.     var Js = JSON.parse(Json);        //json字符串轉換成js對象  
  8. </script>  

 

 

掌握了JSON的基本操做後，咱們就能夠來實現一套方便的本地數據存儲了。咱們先來分析一下，咱們不須要龐雜的SQL語句來解析咱們要對數據庫作的操做，咱們只須要有一套API，直接傳值調用便可。一個數據庫須要創建空間來保存信息，咱們先假想一個空間是能夠無限擴展的、動態調整其自身大小的，但每一個空間之間的值是不關聯的，這個空間的概念相似傳統的數據表。


因此，咱們須要一個主要管理空間的函數，這個函數主要功能是：存儲着每一個空間的名字、能夠建立新的空間、確保向空間插入數據時空間是存在的不然插入失敗、能夠隨意刪除空間。

有了空間的概念後，就須要有個管理空間內部的機器人，這個機器人所懂得的行動就像基本的SQL操做同樣，具備增、刪、查、改功能。

空間能夠理解爲一個容器，這個容器像一個數組，但這個數組的成員不是相同類型的、有各類各樣風格的、有大有小的。這裏成員的概念又像對象，每一個對象均可以不同。


有了以上的想法後，個人手指不受控制地跟着思路跑，結果給我寫出了這麼一個基於JSON的本地存儲，這個是我最滿意的代碼之一了：

 

（ localDB.js ）

 

[javascript]  view plain  copy
 
 print?
  1. //須要myStorage.js文件  
  2. //須要json2.js文件  
  3. if(! (myStorage && JSON)){  
  4.     alert("須要myStorage.js和json2.js兩個文件");  
  5. }  
  6.   
  7. window.localDB = (new (function(){  
  8.   
  9.     //建立一個空間，參數爲空間名  
  10.     this.createSpace = function(space_name){  
  11.   
  12.         if( typeof(space_name)!=="string" ){  
  13.             console.log("space_name參數需爲字符串");  
  14.             return false;  
  15.         }  
  16.         //若是尚未數據庫空間管理器，新建一個，不然檢測空間管理器中是否已存在同名的空間  
  17.         if(!myStorage.getItem("localSpaceDB")){  
  18.             var space_obj = [];  
  19.             var space_json = JSON.stringify(space_obj);     //轉化對象爲JSON格式  
  20.             myStorage.setItem("localSpaceDB", space_json);  
  21.   
  22.             console.log("新建localSpaceDB成功");  
  23.         }  
  24.   
  25.         //取出全部空間名，空間名存在JSON中，因此須要轉化成JS對象  
  26.         var space_obj = JSON.parse(myStorage.getItem("localSpaceDB"));  
  27.   
  28.         //檢查對象是否存在空間名  
  29.         for(var i=0; i<space_obj.length; i++){  
  30.             if(space_obj[i].spaceName == space_name){  
  31.   
  32.                 console.log("已存在空間名"+space_name+"，新建失敗");  
  33.   
  34.                 return false;   //若是已存在空間名，退出函數，返回失敗值  
  35.             }  
  36.         }  
  37.   
  38.         //空間管理器localSpaceDB登記新空間  
  39.         var new_obj = {     //將空間名保存在新對象中  
  40.             spaceName : space_name  
  41.         };  
  42.         var old_space_obj = JSON.parse(myStorage.getItem("localSpaceDB"));   //獲取存儲全部空間名的對象  
  43.         old_space_obj.push( new_obj );  
  44.         var new_space_json = JSON.stringify(old_space_obj);  
  45.         myStorage.setItem("localSpaceDB", new_space_json);  
  46.   
  47.         //新建一個變量名爲space_name的值的空間  
  48.         var data_obj = [];  
  49.         var data_json = JSON.stringify(data_obj);  
  50.         myStorage.setItem(space_name, data_json);  
  51.   
  52.         console.log("新建"+space_name+"空間成功");  
  53.         return true;  
  54.     };  
  55.   
  56.   
  57.     //刪除一個空間，參數爲空間名  
  58.     this.deleteSpace = function(space_name){  
  59.         if( typeof(space_name)!=="string" ){  
  60.             console.log("space_name參數需爲字符串");  
  61.             return false;  
  62.         }  
  63.         //判斷是否刪除的依據變量  
  64.         var isDelete = false;  
  65.         //空間管理器待刪除的空間名的下標  
  66.         var delIndex = -1;  
  67.         //是否存在空間管理器localSpaceDB  
  68.         if(myStorage.getItem("localSpaceDB")){  
  69.             //獲取空間管理器中全部空間名字的json數據並轉化爲js對象  
  70.             var all_space_name_obj = JSON.parse(myStorage.getItem("localSpaceDB"));  
  71.             //檢測是否存在space_name值的空間名，記錄刪除信息  
  72.             for(var i=0; i<all_space_name_obj.length; i++){  
  73.                 if(all_space_name_obj[i].spaceName == space_name){  
  74.                     isDelete = true;  
  75.                     delIndex = i;  
  76.                 }  
  77.             }  
  78.             //肯定是否刪除  
  79.             if(isDelete === true && delIndex !== -1){  
  80.                 all_space_name_obj.splice(delIndex, 1);     //刪除空間名  
  81.                 var new_space_json = JSON.stringify(all_space_name_obj);    //轉換對象爲JSON  
  82.                 //更新空間管理器信息  
  83.                 myStorage.setItem("localSpaceDB", new_space_json);  
  84.                 //刪除空間  
  85.                 myStorage.removeItem(space_name);  
  86.   
  87.                 console.log("成功刪除"+space_name+"空間");  
  88.                 return true;  
  89.             }  
  90.             else{  
  91.                 console.log("刪除空間失敗，不存在"+space_name+"空間");  
  92.                 return false;  
  93.             }  
  94.         }  
  95.     };  
  96.   
  97.     //插入數據，參數分別爲空間名、插入的對象（不單純用值來表示，用對象來表示數據）  
  98.     this.insert = function(space_name, obj_data){  
  99.         //檢測是否存在空間  
  100.         if(myStorage.getItem(space_name)){  
  101.             //獲取空間存儲的數據  
  102.             var all_data = JSON.parse(myStorage.getItem(space_name));  
  103.             //插入數據  
  104.             all_data.push(obj_data);  
  105.             myStorage.setItem(space_name, JSON.stringify(all_data));  
  106.   
  107.             console.log("已插入數據："+obj_data+"，全部數據以下：");  
  108.             console.dir(all_data);  
  109.             return true;  
  110.         }  
  111.         else{  
  112.             console.log("不存在"+space_name+"空間");  
  113.             return false;  
  114.         }  
  115.     };  
  116.   
  117.     //更新數據，參數爲舊的對象、用於替換就對象的新對象  
  118.     //若是空間中有如出一轍的數據，則更新最新的那個  
  119.     this.update = function(space_name, obj_origin, obj_replace){  
  120.         //檢測是否存在空間  
  121.         if(myStorage.getItem(space_name)){  
  122.             //獲取舊對象下標  
  123.             var objIndex = -1;  
  124.             //獲取空間存儲的數據  
  125.             var all_data = JSON.parse(myStorage.getItem(space_name));  
  126.             //遍歷空間，找到obj_origin對象  
  127.             for(var i=all_data.length-1; i>=0; i--){  
  128.                 //若是找到舊對象  
  129.                 if(JSON.stringify(all_data[i]) == JSON.stringify(obj_origin)){  
  130.                     objIndex = i;  
  131.                 }  
  132.             }  
  133.             //若是找到舊對象  
  134.             if(objIndex !== -1){  
  135.                 all_data.splice(objIndex, 1, obj_replace);  
  136.                 //更新空間  
  137.                 myStorage.setItem(space_name, JSON.stringify(all_data));  
  138.   
  139.                 console.log("已更新數據："+obj_origin+"，全部數據以下：");  
  140.                 console.dir(all_data);  
  141.                 return true;  
  142.             }  
  143.             else{  
  144.                 console.log("沒有"+obj_origin+"對象");  
  145.                 return false;  
  146.             }  
  147.         }  
  148.         else{  
  149.             console.log("不存在"+space_name+"空間");  
  150.             return false;  
  151.         }  
  152.     };  
  153.   
  154.     //刪除數據，參數爲須要刪除的對象  
  155.     //若是空間中有如出一轍的數據，則刪除最新的那個  
  156.     this.delete = function(space_name, obj_data){  
  157.         //檢測是否存在空間  
  158.         if(myStorage.getItem(space_name)){  
  159.             //獲取舊對象下標  
  160.             var objIndex = -1;  
  161.             //獲取空間存儲的數據  
  162.             var all_data = JSON.parse(myStorage.getItem(space_name));  
  163.             //遍歷空間，找到obj_data對象  
  164.             for(var i=all_data.length-1; i>=0; i--){  
  165.                 //若是找到舊對象  
  166.                 if(JSON.stringify(all_data[i]) == JSON.stringify(obj_data)){  
  167.                     objIndex = i;  
  168.                 }  
  169.             }  
  170.             //若是找到舊對象  
  171.             if(objIndex !== -1){  
  172.                 all_data.splice(objIndex, 1);  
  173.                 //更新空間  
  174.                 myStorage.setItem(space_name, JSON.stringify(all_data));  
  175.   
  176.                 console.log("已刪除數據："+obj_data+"，全部數據以下：");  
  177.                 console.dir(all_data);  
  178.                 return true;  
  179.             }  
  180.             else{  
  181.                 console.log("沒有"+obj_data+"對象");  
  182.                 return false;  
  183.             }  
  184.         }  
  185.         else{  
  186.             console.log("不存在"+space_name+"空間");  
  187.             return false;  
  188.         }  
  189.     };  
  190.   
  191.     //查詢函數，參數爲字符串或數字或數組或布爾型，或對象的屬性，返回一個結果數組  
  192.     this.select = function(space_name, select_value=" ", is_select_all=true){  
  193.         if(myStorage.getItem(space_name)){  
  194.             //初始化結果數組  
  195.             var select_result = [];  
  196.   
  197.             //生產存儲於結果數組中的對象  
  198.             function productObj(row, ob){  
  199.                 return ({  
  200.                     At : row,  
  201.                     Obj : ob  
  202.                 });  
  203.             };  
  204.   
  205.             //獲取space_name空間的全部數據對象  
  206.             var all_data = JSON.parse(myStorage.getItem(space_name));  
  207.   
  208.             //若是存在查詢條件  
  209.             if(select_value){  
  210.                 //是否查找所有  
  211.                 if(is_select_all === true){  
  212.                     for(var i=all_data.length-1; i>=0; i--){  
  213.                         //所有查找，生成結果集  
  214.                         select_result.push(new productObj(i,all_data[i]));  
  215.                     }  
  216.                 }  
  217.                 else{  
  218.                     //條件查找  
  219.                     for(var i=all_data.length-1; i>=0; i--){  
  220.                         //若是格式相同，檢測值相等狀況  
  221.                         if( typeof(all_data[i]) === typeof(select_value) ){  
  222.                             if(JSON.stringify(all_data[i]) === JSON.stringify(select_value) ){  
  223.                                 //若是找到，保存到結果集  
  224.                                 select_result.push(new productObj(i,all_data[i]));  
  225.                             }  
  226.                         }  
  227.                         else{  
  228.                             if( typeof(all_data[i]) !== "number" ||  
  229.                                 typeof(all_data[i]) !== "boolean" ||  
  230.                                 typeof(all_data[i]) !== "string"  
  231.                             ){  
  232.                                 for( var x in all_data[i]){  
  233.                                     if(typeof(all_data[i][x]) === typeof(select_value)){  
  234.                                         if(JSON.stringify(all_data[i][x]) === JSON.stringify(select_value) ){  
  235.                                             //若是找到，保存到結果集  
  236.                                             select_result.push(new productObj(i,all_data[i]));  
  237.                                         }  
  238.                                     }  
  239.                                 }  
  240.                             }  
  241.                         }  
  242.                     }  
  243.                 }  
  244.             }  
  245.             if(select_result.length>0){  
  246.                 console.log("查詢到結果");  
  247.                 console.dir(select_result);  
  248.             }  
  249.             else{  
  250.                 console.log("沒查詢到結果");  
  251.             }  
  252.   
  253.             //返回結果集  
  254.             return select_result;  
  255.         }  
  256.         else{  
  257.             console.log("不存在"+space_name+"空間");  
  258.             return [];  
  259.         }  
  260.     };  
  261.   
  262. })());  

 

 

至於上面的 localDB.js 的用法，很簡單，我寫了一個例子：

 

（ localDB.js 使用測試 ）

 

[html]  view plain  copy
 
 print?
  1. <script src="myStorage.js"></script>  
  2. <script src="json2.js"></script>  
  3. <script src="localDB.js"></script>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7.     //建立一個叫Coffee存儲空間  
  8.     localDB.createSpace("Coffee");  
  9.   
  10.     //能夠向Coffee插入任何類型的數據  
  11.     localDB.insert("Coffee", "mocha");  
  12.     localDB.insert("Coffee", {name:"cappuccino",price:28});  
  13.     localDB.insert("Coffee", false);  
  14.     localDB.insert("Coffee", [1,2,3]);  
  15.   
  16.     //更新某個數據，第二個參數須要跟插入時對應的參數的值如出一轍  
  17.     localDB.update("Coffee", "mocha", "DB");  
  18.     localDB.update("Coffee", {name:"cappuccino",price:28}, {name:"latte",price:31})  
  19.   
  20.     //按條件查詢數據並返回結果數組，最多可按條件深度挖掘到空間的第三層數據，有興趣的童鞋能夠加個遞歸讓它不停挖掘數據  
  21.     var some = localDB.select("Coffee","man");  
  22.     //不輸入第2、三參數則查找空間中所有數據  
  23.     var all = localDB.select("Coffee");  
  24.   
  25.     //刪除空間中的數據，第二個參數須要跟插入時對應的參數值如出一轍  
  26.     localDB.delete("Coffee","DB");  
  27.     //刪除Coffe空間，空間全部數據丟失  
  28.     localDB.deleteSpace("Coffee");  
  29.       
  30. </script>  



二、localDB數據存儲的相關概念：

（1）兩個空間：

         這裏的空間是指空間管理器的功能，一個是createSpace函數用於按名建立一個存儲空間，另外一個是deleteSpace函數是用於按名刪除一個存儲空間。

（2）四個操做：

         這裏的操做是指對某個空間所能執行的操做，第一個是insert操做能向空間插入任一類型的數據，第二個是update操做能用一個數據去替換空間的某個數據，第三個是delete操做能刪除空間中某個數據，第四個是select操做能根據一個數據去查詢空間中匹配的數據並返回一個存儲着多個 { At:結果數組下標值, Obj:結果對象 } 對象的結果數組。

 

（3）對比：

         比WebSQL簡單多了有木有？原本我打算將local封裝成使用SQL來操做的數據庫，可是有三點理由阻止了個人衝動，第1、我沒有時間（單純完成這篇文章就花了我好幾天空餘時間）；第2、網上已經有大神封裝過了，那個複雜啊看得我以爲再去封裝不必了；第3、就算將localDB弄成SQL的操做，體驗上也沒有直接用WebSQL好。若是排除了以前使用數據庫的慣性，只從js角度來看，WebSQL這樣的用法徹底丟失了js的最大特性——動態，不採用SQL方案而選擇JSON才符合JS的正統血液，只要不考慮性能問題，把性能的影響壓縮到最小，基於JSON的H5本地存儲才適合前端的環境，JS+JSON能誕生更多創造性的編程方法，同時H5纔會愈來愈具有魅力和挑戰。

 

三、localDB類的應用場景：

有了localDB類，能作什麼？作的東西可多了，好比，在本地保存用戶的帳號、密碼、帳號信息，就能夠避免同一個網站二次登錄，或者避免了屢次請求重複的數據致使加大了服務器的負擔，可定時根據序列號或md5值等等方案來同步本地與服務器的數據等等。總之，在H5本地存儲領域，原生的localStorage是用得最普遍的，至於seesionStorage還不如服務器端語言用得方便實在，而webSQL就沒必要說了，兼容性太差，開發起來太麻煩，而且有點雞肋。因此，若是你想體驗或使用H5存儲，能夠試用個人localDB，目的是經過使用我寫的localDB來提供你一些思路，而後你能根據需求來打造屬於你的H5本地存儲函數。

 

有須要localDB.js的童鞋，請點擊這裏下載。

 

 

 

 



5、總結；

 

若是是作一個網站的話，大多仍是依賴着服務器，幾乎全部數據都存儲在服務器，大量的數值運算也在服務器，因此對於網站來講，H5本地存儲除了提升用戶體驗、增強本地應用功能以外，彷佛有點雞肋和尷尬。可是，H5並非都用來作網站的，好比在遊戲方面，H5本地存儲提供了一個很好的存儲功能，也就意味着H5所作的並不必定都是聯網應用，它也能夠是本地應用，沒有網絡照樣玩得轉起來，在沒有網絡的狀況下，本地存儲是一個必要的存在了。在NativeApp的開發趨於重度聯網應用的狀況下，WebApp正在悄悄兼顧並完善着起本地的使用，在將來誰會取代誰很差說，但發展趨勢是原生軟件更加依賴硬件的支持即軟件硬件化，而H5技術的產品則是隨時隨地使用化。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程