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教程