-将暮未暮
-将暮未暮

H5本地存储








H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。





一、Web Storage教程


1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。


2、口诀：

（1）两个接口：分别是localStorage和sessonStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear


3、localStorage：

（1）特性：

     域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

（2）四个函数：

     A. localStorage.setItem      存储数据信息到本地

     B. localStorage.getItem      读取本地存储的信息

     C. localStorage.removeItem   删除本地存储的信息

     D. localStorage.clear        清空所以存储的信息

    


 4、sessonStorage：

 （1）特性：

      会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

 （2）四个函数：

      A. sessionStorage.setItem       存储数据信息到本地

      B. sessionStorage.getItem       读取本地存储的信息

      C. sessionStorage.removeItem    删除本地存储的信息

      D. sessionStorage.clear         清空所以存储的信息

      


5、四个函数的用法：

（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类的函数用法基本一致，就不再详解。

     


6、兼容问题：

有人会说本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在javascript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。






二、Web Storage应用


1、基本使用：

我们先把上面的四个函数整理一下，并加入一段验证代码用于检测本地的数据存储的存在情况。


（ localStorage 使用测试 ）

[javascript]  view plain  copy
  1. "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.   

如果上面代码执行后弹出框提示不存在的话，那么意味着本地不支持H5的 localStorage 本地存储。那么不支持怎么办，DON'T 担心，可以写一段代码来兼容使用，请继续看下去。


2、兼容使用：

在写兼容代码前，再来说一点关于Web Storage的内容，在Web Storage的两个类中，我们比较常用的是localStorage类，至于session的话就交给后台去写吧。但是localStorage类在不支持H5的时候使用不了，所以我们将localStorage的四个函数封装一下，使得当浏览器或客户端不兼容localStorage时自动切换到Cookies存储。

首先，要写好一个操作cookie的类和函数，将四个函数的名字和参数还有功能和localStorage保持一致。正好，《JavaScript权威指南》第五版里已经写好了一个cookieStorage代码，但是呢，这段代码有BUG的，和稍微与localStorage不一致，所以我修改了一下，花了点时间造下轮子，代码如下：


（ cookieStorage.js ）

[javascript]  view plain  copy
  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
  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
  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
  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，请看下文。






三、Web SQL教程



1、概述：

H5的本地存储中，其实localStorage并不算是很强大的存储，而Web SQL Database才是牛逼的存在，在浏览器或客户端直接可以实现一个本地的数据库应用，比如做一个个人的备忘录啊，注意，是个人，为什么？因为世面上只有主流的浏览器实现了WebSQL功能，很多非主流并不兼容WebSQL，并且，所谓的主流只是编程开发人员眼中的主流，如果是用户平时自己使用的那些乱七八糟的浏览器，WebSQL简直是灾难啊！！！另外，浏览器间对WebSQL的支持并非为规范，因为这个规范几年前被官方放弃了。还有一个WebSQL不能够广泛使用的原因是，大量前端工程师不懂数据库也没有上进心或好奇心或空闲时间去研究和学会应用WebSQL，导致了开发人员逃避WebSQL和用户对WebSQL没有使用习惯和各类客户端对WebSQL兼容性参差不齐等现象，是WebSQL不能够像服务器端的数据库那么广泛应用的主要原因。


吐槽归吐槽，教程还是要写的。先说学习口诀：“一个语言，三个函数”。



2、口诀：

（1）一个语言：不管是WebSQL还是MySQL，SQL的语法必须掌握。SQL是一个结构化查询语言，说白就是用来查询数据的语言中是最自然、最简洁的。

（2）三个函数：分别是：
        A. openDatabase    创建或打开一个本地的数据库对象
        B. executeSql      执行SQL语句，在回调函数的参数中获取执行结果
        C. transaction     处理事务，当一条语句执行失败的时候，之前的执行全部失效


3、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 列名称 = 值



4、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")});

           });



5、Web SQL的使用：

程序员最喜欢做的事情之一就是封装，将代码封装成自己喜欢的样子，然后在需要用到时会感谢当年封装好的类或函数不需要再造轮子就直接修改着用。所以，我也不例外，把openDatabase、executeSql、transaction三个核心函数封装成一个类。注意，这个类只是实现基本的功能，并且查询我没有写条件查询而是直接查询全部结果。对封装Web SQL有兴趣的童鞋可以研究一下以下代码：

（没兴趣的请忽略，跳到第四条：H5本地存储的框架程序）


（ webSQL.js ）

[javascript]  view plain  copy
  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
  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
  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
  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
  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
  123.             if(colValueArray[m]){  
  124.                 fanalArray.push(colValueArray[m]);  
  125.             }  
  126.         }  
  127.         if(whereColValue){  
  128.             for(var n=0; 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
  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
  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
  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
  1. >  
  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 SQLb><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的），本文所有代码皆只为了供学习和参考，不适直接生产使用。






四、H5本地存储的框架程序（重点）



1、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
  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
  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
  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
  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
  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.     //不输入第二、三参数则查找空间中全部数据  
  23.     var all = localDB.select("Coffee");  
  24.   
  25.     //删除空间中的数据，第二个参数需要跟插入时对应的参数值一模一样  
  26.     localDB.delete("Coffee","DB");  
  27.     //删除Coffe空间，空间所有数据丢失  
  28.     localDB.deleteSpace("Coffee");  
  29.       
  30. script>  


2、localDB数据存储的相关概念：

（1）两个空间：

         这里的空间是指空间管理器的功能，一个是createSpace函数用于按名创建一个存储空间，另一个是deleteSpace函数是用于按名删除一个存储空间。

（2）四个操作：

         这里的操作是指对某个空间所能执行的操作，第一个是insert操作能向空间插入任一类型的数据，第二个是update操作能用一个数据去替换空间的某个数据，第三个是delete操作能删除空间中某个数据，第四个是select操作能根据一个数据去查询空间中匹配的数据并返回一个存储着多个 { At:结果数组下标值, Obj:结果对象 } 对象的结果数组。


（3）对比：

         比WebSQL简单多了有木有？本来我打算将local封装成使用SQL来操作的数据库，但是有三点理由阻止了我的冲动，第一、我没有时间（单纯完成这篇文章就花了我好几天空余时间）；第二、网上已经有大神封装过了，那个复杂啊看得我觉得再去封装没必要了；第三、就算将localDB弄成SQL的操作，体验上也没有直接用WebSQL好。如果排除了之前使用数据库的惯性，只从js角度来看，WebSQL这样的用法完全丢失了js的最大特性——动态，不采用SQL方案而选择JSON才符合JS的正统血液，只要不考虑性能问题，把性能的影响压缩到最小，基于JSON的H5本地存储才适合前端的环境，JS+JSON能诞生更多创造性的编程方法，同时H5才会越来越具备魅力和挑战。


3、localDB类的应用场景：

有了localDB类，能做什么？做的东西可多了，比如，在本地保存用户的账号、密码、账号信息，就可以避免同一个网站二次登陆，或者避免了多次请求重复的数据导致加大了服务器的负担，可定时根据序列号或md5值等等方案来同步本地与服务器的数据等等。总之，在H5本地存储领域，原生的localStorage是用得最广泛的，至于seesionStorage还不如服务器端语言用得方便实在，而webSQL就不必说了，兼容性太差，开发起来太麻烦，并且有点鸡肋。所以，如果你想体验或使用H5存储，可以试用我的localDB，目的是通过使用我写的localDB来提供你一些思路，然后你能根据需求来打造属于你的H5本地存储函数。


有需要localDB.js的童鞋，请点击这里下载。







五、总结；


如果是做一个网站的话，大多还是依赖着服务器，几乎所有数据都存储在服务器，大量的数值运算也在服务器，所以对于网站来说，H5本地存储除了提高用户体验、加强本地应用功能之外，似乎有点鸡肋和尴尬。但是，H5并不是都用来做网站的，比如在游戏方面，H5本地存储提供了一个很好的存储功能，也就意味着H5所做的并不一定都是联网应用，它也可以是本地应用，没有网络照样玩得转起来，在没有网络的情况下，本地存储是一个必要的存在了。在NativeApp的开发趋于重度联网应用的情况下，WebApp正在悄悄兼顾并完善着起本地的使用，在未来谁会取代谁不好说，但发展趋势是原生软件更加依赖硬件的支持即软件硬件化，而H5技术的产品则是随时随地使用化。






H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。





一、Web Storage教程


1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。


2、口诀：

（1）两个接口：分别是localStorage和sessonStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear


3、localStorage：

（1）特性：

     域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

（2）四个函数：

     A. localStorage.setItem      存储数据信息到本地

     B. localStorage.getItem      读取本地存储的信息

     C. localStorage.removeItem   删除本地存储的信息

     D. localStorage.clear        清空所以存储的信息

    


 4、sessonStorage：

 （1）特性：

      会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

 （2）四个函数：

      A. sessionStorage.setItem       存储数据信息到本地

      B. sessionStorage.getItem       读取本地存储的信息

      C. sessionStorage.removeItem    删除本地存储的信息

      D. sessionStorage.clear         清空所以存储的信息

      


5、四个函数的用法：

（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类的函数用法基本一致，就不再详解。

     


6、兼容问题：

有人会说本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在javascript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。






二、Web Storage应用


1、基本使用：

我们先把上面的四个函数整理一下，并加入一段验证代码用于检测本地的数据存储的存在情况。


（ localStorage 使用测试 ）

[javascript]  view plain  copy
  1. "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.   

如果上面代码执行后弹出框提示不存在的话，那么意味着本地不支持H5的 localStorage 本地存储。那么不支持怎么办，DON'T 担心，可以写一段代码来兼容使用，请继续看下去。


2、兼容使用：

在写兼容代码前，再来说一点关于Web Storage的内容，在Web Storage的两个类中，我们比较常用的是localStorage类，至于session的话就交给后台去写吧。但是localStorage类在不支持H5的时候使用不了，所以我们将localStorage的四个函数封装一下，使得当浏览器或客户端不兼容localStorage时自动切换到Cookies存储。

首先，要写好一个操作cookie的类和函数，将四个函数的名字和参数还有功能和localStorage保持一致。正好，《JavaScript权威指南》第五版里已经写好了一个cookieStorage代码，但是呢，这段代码有BUG的，和稍微与localStorage不一致，所以我修改了一下，花了点时间造下轮子，代码如下：


（ cookieStorage.js ）

[javascript]  view plain  copy
  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
  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
  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
  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，请看下文。






三、Web SQL教程



1、概述：

H5的本地存储中，其实localStorage并不算是很强大的存储，而Web SQL Database才是牛逼的存在，在浏览器或客户端直接可以实现一个本地的数据库应用，比如做一个个人的备忘录啊，注意，是个人，为什么？因为世面上只有主流的浏览器实现了WebSQL功能，很多非主流并不兼容WebSQL，并且，所谓的主流只是编程开发人员眼中的主流，如果是用户平时自己使用的那些乱七八糟的浏览器，WebSQL简直是灾难啊！！！另外，浏览器间对WebSQL的支持并非为规范，因为这个规范几年前被官方放弃了。还有一个WebSQL不能够广泛使用的原因是，大量前端工程师不懂数据库也没有上进心或好奇心或空闲时间去研究和学会应用WebSQL，导致了开发人员逃避WebSQL和用户对WebSQL没有使用习惯和各类客户端对WebSQL兼容性参差不齐等现象，是WebSQL不能够像服务器端的数据库那么广泛应用的主要原因。


吐槽归吐槽，教程还是要写的。先说学习口诀：“一个语言，三个函数”。



2、口诀：

（1）一个语言：不管是WebSQL还是MySQL，SQL的语法必须掌握。SQL是一个结构化查询语言，说白就是用来查询数据的语言中是最自然、最简洁的。

（2）三个函数：分别是：
        A. openDatabase    创建或打开一个本地的数据库对象
        B. executeSql      执行SQL语句，在回调函数的参数中获取执行结果
        C. transaction     处理事务，当一条语句执行失败的时候，之前的执行全部失效


3、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 列名称 = 值



4、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")});

           });



5、Web SQL的使用：

程序员最喜欢做的事情之一就是封装，将代码封装成自己喜欢的样子，然后在需要用到时会感谢当年封装好的类或函数不需要再造轮子就直接修改着用。所以，我也不例外，把openDatabase、executeSql、transaction三个核心函数封装成一个类。注意，这个类只是实现基本的功能，并且查询我没有写条件查询而是直接查询全部结果。对封装Web SQL有兴趣的童鞋可以研究一下以下代码：

（没兴趣的请忽略，跳到第四条：H5本地存储的框架程序）


（ webSQL.js ）

[javascript]  view plain  copy
  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
  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
  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
  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
  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
  123.             if(colValueArray[m]){  
  124.                 fanalArray.push(colValueArray[m]);  
  125.             }  
  126.         }  
  127.         if(whereColValue){  
  128.             for(var n=0; 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
  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
  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
  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
  1. >  
  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 SQLb><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的），本文所有代码皆只为了供学习和参考，不适直接生产使用。






四、H5本地存储的框架程序（重点）



1、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
  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
  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
  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
  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
  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.     //不输入第二、三参数则查找空间中全部数据  
  23.     var all = localDB.select("Coffee");  
  24.   
  25.     //删除空间中的数据，第二个参数需要跟插入时对应的参数值一模一样  
  26.     localDB.delete("Coffee","DB");  
  27.     //删除Coffe空间，空间所有数据丢失  
  28.     localDB.deleteSpace("Coffee");  
  29.       
  30. script>  


2、localDB数据存储的相关概念：

（1）两个空间：

         这里的空间是指空间管理器的功能，一个是createSpace函数用于按名创建一个存储空间，另一个是deleteSpace函数是用于按名删除一个存储空间。

（2）四个操作：

         这里的操作是指对某个空间所能执行的操作，第一个是insert操作能向空间插入任一类型的数据，第二个是update操作能用一个数据去替换空间的某个数据，第三个是delete操作能删除空间中某个数据，第四个是select操作能根据一个数据去查询空间中匹配的数据并返回一个存储着多个 { At:结果数组下标值, Obj:结果对象 } 对象的结果数组。


（3）对比：

         比WebSQL简单多了有木有？本来我打算将local封装成使用SQL来操作的数据库，但是有三点理由阻止了我的冲动，第一、我没有时间（单纯完成这篇文章就花了我好几天空余时间）；第二、网上已经有大神封装过了，那个复杂啊看得我觉得再去封装没必要了；第三、就算将localDB弄成SQL的操作，体验上也没有直接用WebSQL好。如果排除了之前使用数据库的惯性，只从js角度来看，WebSQL这样的用法完全丢失了js的最大特性——动态，不采用SQL方案而选择JSON才符合JS的正统血液，只要不考虑性能问题，把性能的影响压缩到最小，基于JSON的H5本地存储才适合前端的环境，JS+JSON能诞生更多创造性的编程方法，同时H5才会越来越具备魅力和挑战。


3、localDB类的应用场景：

有了localDB类，能做什么？做的东西可多了，比如，在本地保存用户的账号、密码、账号信息，就可以避免同一个网站二次登陆，或者避免了多次请求重复的数据导致加大了服务器的负担，可定时根据序列号或md5值等等方案来同步本地与服务器的数据等等。总之，在H5本地存储领域，原生的localStorage是用得最广泛的，至于seesionStorage还不如服务器端语言用得方便实在，而webSQL就不必说了，兼容性太差，开发起来太麻烦，并且有点鸡肋。所以，如果你想体验或使用H5存储，可以试用我的localDB，目的是通过使用我写的localDB来提供你一些思路，然后你能根据需求来打造属于你的H5本地存储函数。


有需要localDB.js的童鞋，请点击这里下载。







五、总结；


如果是做一个网站的话，大多还是依赖着服务器，几乎所有数据都存储在服务器，大量的数值运算也在服务器，所以对于网站来说，H5本地存储除了提高用户体验、加强本地应用功能之外，似乎有点鸡肋和尴尬。但是，H5并不是都用来做网站的，比如在游戏方面，H5本地存储提供了一个很好的存储功能，也就意味着H5所做的并不一定都是联网应用，它也可以是本地应用，没有网络照样玩得转起来，在没有网络的情况下，本地存储是一个必要的存在了。在NativeApp的开发趋于重度联网应用的情况下，WebApp正在悄悄兼顾并完善着起本地的使用，在未来谁会取代谁不好说，但发展趋势是原生软件更加依赖硬件的支持即软件硬件化，而H5技术的产品则是随时随地使用化。

你可能感兴趣的:(H5本地存储)

  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • nfs服务搭建 GHope
    nfs是什么？基哥度娘网络文件系统(NFS)是sun微系统最初开发的分布式文件系统协议,[1]允许客户端计算机上的用户通过计算机网络访问文件很像本地存储被访问。NFS与许多其他协议一样,在开放网络计算远程过程调用(很久以前RPC)系统上建立。NFS是在请求注释(RFC)中定义的开放标准,允许任何人实现协议。NFSNFS优势：节省本地存储空间，将常用的数据存放在一台NFS服务器上且可以通过网络访问，
  • Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库 默林工作室 AxureRP原型模板axure原型模板
    作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
  • 输入上/下标数字以及字母 ruisi_we 其他
    输入上/下标数字以及字母H5上标标签H5下标标签Word附上一些常用上下标H5上标标签//X²X2//5²52H5下标标签//X₂X2//5₂X2Word选中你要修改成上标或下标的字符，点击字体。要变成上标还是下标就看你了。附上一些常用上下标//上标⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ//下标₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎//上标ᵃᵇᶜᵈᵉᵍʰⁱʲᵏˡᵐⁿᵒᵖʳˢᵗᵘᵛʷˣʸᙆᴬᴮᒼᴰᴱᴳᴴᴵᴶᴷᴸᴹ
  • Python世界：简易地址簿增删查改算法实践 来知晓 Python世界python机器学习开发语言
    Python世界：简易地址簿增删查改算法实践任务背景编码思路代码实现本文小结任务背景该任务来自简明Python教程中迈出下一步一章的问题：编写一款你自己的命令行地址簿程序，你可以用它浏览、添加、编辑、删除或搜索你的联系人，例如你的朋友、家人、同事，还有他们诸如邮件地址、电话号码等多种信息。这些详细信息必须被妥善储存以备稍后的检索。编码思路从问题中可以提炼以下信息：1、地址簿需要支持本地存储读写；2
  • uniapp设计H5 tabbar会遮挡内容区的解决办法 qq_39016177 uni-app
    uniapp设计H5tabbar会遮挡内容区的解决办法1.现象底部tabbar会遮挡内容区最底部的文字2.解决方法—css中增加个padding-bottom:var(–window-bottom)这样就是好了官方依据官方文档链接https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F诸君有用且点赞
  • uniapp H5 关掉全部头部header qq_39016177 uni-app
    uniappH5关掉全部头部header1.进入pages.json文件"globalStyle":{//"navigationStyle":"custom","navigationBarTextStyle":"black","navigationBarTitleText":"","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":
  • H5新增标签和属性 yx_back HtmlH5新增属性H5新增标签
    H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节
  • Windows系统下安装Redis bjzhang75 windowsredis数据库
    文章目录1、下载Redis安装包2、解压压缩包3、运行Redis4、Redis连接检测5、Redis相关设置5.1设置环境变量PATH5.2Redis配置文件修改1、下载Redis安装包Windows版本的Redis可以在Github中下载：下载Redis2、解压压缩包将下载的压缩包解压到某个目录下，比如：C:\redis。3、运行Redis在cmd窗口中运行命令redis-serverredis
  • uni-app开发微信小程序 hong161688 uni-app微信小程序小程序
    uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超
  • 使用 uni-app 开发微信小程序：深入教程与技巧 代码伐木匠 笔记本uni-app微信小程序notepad++
    使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭
  • React Native动画的锚点anchorPoint 沉默的依恋 ReactNative
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
  • SeuratObject转h5ad格式 星星醉了 笔记
    Python的MetaCells版本输入貌似一定要h5ad格式，所以就探索了一下~这个是最方便的：SeuratDisk#安装这个包,试了直接installl和biomanager都不行,只能githubremotes::install_github("mojaveazure/seurat-disk")#载入library(SeuratDisk)library(Seurat)#一个叫seurat.h
  • seurat自学笔记1.0 单细胞数据导入 Sanye2022 pythonpandas
    Python读取.h5ad文件importanndataimportpandasaspdadata=anndata.read("/home/R/R_data/Seurat/PBMC10/output/adata.h5ad")#adata.X.todense()#将稀疏矩阵转成普通矩阵#X=pd.DataFrame(adata.X.todense())#cell_name=adata.obs.ind
  • Uni-app 开发微信小程序 vvvae1234 uni-app
    随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套
  • HTML5中的数据存储sessionStorage、localStorage 阿立聊代码 HTML实战html5前端html
    第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo
  • 简易版ts+axios封装 谷神神神 typescript
    用到了VITE变量，可以参考VITE变量使用方式importaxios,{AxiosRequestConfig}from"axios";constinstance=axios.create({baseURL:import.meta.env.VITE_DEVSERVER,});//在header中添加本地存储的token//其他操作同理instance.interceptors.request.us
  • 从学习vue到uni-app的心得感悟 crazy_章鱼哥 学习uni-app前端javascript
    前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、
  • java api gateway_微服务中的 API 网关（API Gateway） Showtime 100 javaapigateway
    背景我们知道在微服务架构风格中，一个大应用被拆分成为了多个小的服务系统提供出来，这些小的系统他们可以自成体系，也就是说这些小系统可以拥有自己的数据库，框架甚至语言等，这些小系统通常以提供RestApi风格的接口来被H5,Android,IOS以及第三方应用程序调用。但是在UI上进行展示的时候，我们通常需要在一个界面上展示很多数据，这些数据可能来自于不同的微服务中，举个例子。在一个电商系统中，查看一
  • vue缓存事件的方法有什么 芥子纳须弥1116 vue.js缓存前端javascriptecmascript
    Vue可以使用多种方法缓存事件。一些常见的方法包括：使用计算属性：在事件处理程序中，可以通过将数据存储在计算属性中来缓存事件。使用Vuex：Vuex是Vue的状态管理模式，可以存储应用程序状态并以统一的方式进行管理。使用本地存储：可以使用浏览器的本地存储(如localStorage或sessionStorage)缓存事件。使用Vue实例的响应式对象：可以将数据存储在Vue实例的响应式对象中以便在事
  • 老杨股票基金定投直播第588天 老杨定投直播
    老杨股票基金定投直播第588天今日买入：无。今日卖出：无。今日盈亏：300ETF赚3738元，恒生ETF赚7107元，黄金ETF赚1533元，德国30赚4508元，纳指ETF赚5268元。累计盈亏率：$300ETF(SH510300)$-3.87%，$恒生ETF(SZ159920)$0.7%，$黄金ETF(SZ159934)$-2.34%，德国30-0.7%，纳指ETF18.59%。每周一买入，计
  • Pinia持久化插件：pinia-plugin-persistedstate 正小安 vue杂谈vue.js前端
    Pinia持久化插件pinia-plugin-persistedstate是一个Pinia插件，用于持久化Piniastore的状态到本地存储（如localStorage或sessionStorage）。以下是关于pinia-plugin-persistedstate的使用及配置的详细说明：使用步骤安装插件使用以下命令安装pinia-plugin-persistedstate：pnpmaddpin
  • uniapp 小程序样式兼容 zpjing~.~ uni-app小程序前端
    一、遇到的问题使用uniapp一起开发h5和小程序版本，在h5上样式是正常的，但是小程序里样式未生效二、遇到的情况1、*标签经过小程序编译后会变成label标签，css中span样式的位置label标签*标签位置添加class，class在h5和小程序中都兼容2、ulli*标签标签经过小程序编译后会变成view标签*标签位置添加class，class在h5和小程序中都兼容3、引用子组件div中几个
  • uniapp数据缓存和发起网络请求 小汤猿人类 uni-app缓存java
    数据缓存uni.onStorageSync同步的方式将数据存储到本地缓存存储数据constonStorageSync=()=>{//存储数据uni.setStorageSync('username','张三');uni.setStorageSync('age',25);};uni.getStorageSync从本地存储中同步读取数据存储数据{{username}}{{age}}import{ref
  • element-ui layout布局 铺满整个空间方法 遇事不决AI解决 uicss3cssvue.jsjavascript
    h5布局文件上传css样式有些朋友用height:100%并不能铺满，这个时候可以使用height:100vh即可铺满html,body,.el-container{/*设置内部填充为0，几个布局元素之间没有间距*/padding:0px!important;/*外部间距也是如此设置*/margin:0px!important;/*统一设置高度为100%*/height:100vh;}有任何问题都
  • HTML文档中折行的使用,10_h5是如何做移动端适配的？折行的时候如何实现不断行... Mr.Zzzzzzz HTML文档中折行的使用
    一、百分比适配1、要点元素的宽度使用了百分比来定宽，根据屏幕的宽度进行自适应适合页面内容结构均匀分配,固定高度,结构不是很复杂,注意要设置viewport视口内容宽度等于设备的宽度使用百分比定宽的元素，百分比参考的是该元素最近的，定了宽度的父元素2、示例固定高度,宽度自适应,100%比做适配*{padding:0;margin:0;}body{font-size:16px;overflow:hid
  • H5漂流瓶交友源码_社交漂流瓶H5源码 北漂的老猿 好代码交友漂流瓶
    简介：社交漂流瓶搭建教程环境：Nginx1.20.1-MySQL5.6.50-PHP-7.3上传源码至网站根目录，创建并导入数据库数据库信息修改：/config/database.php网站运行目录/public好代码免费下载：百度网盘
  • WebView交互架构项目实战（三），史上超级详细 m0_66264881 程序员架构移动开发android
    returnsplashTargetPath+“/”;}***1：常用JS本地化及延迟加载*******资源等文件(不需要更新)本地存储，在需要的时候直接从本地获取。哪些资源需要我们去存储在本地呢，当然是一些不会被更新的资源，例如图片文件，js文件，css文件，比预加载更粗暴的优化方法是直接将常用的JS脚本本地化，直接打包放入apk中。比如H5页面获取用户信息，设置标题等通用方法，就可以直接写入一
  • 2018-06-15 h5开发记录 superKelly
    php加载流程php->html->js+cssphp1.smarty赋值$smarty->assign("loadMsg",array('pic'=>'error','footDesc'=>'ec:'.$res));$smarty->caching=false;2.发起请求$url=Config::getApiActivityUrl().'/activity/anniversary/getGue
  • 分享100个最新免费的高匿HTTP代理IP mcj8089 代理IP代理服务器匿名代理免费代理IP最新代理IP
      推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/     120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/
  • mysql高级特性之数据分区 annan211 java数据结构mongodb分区mysql
    mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理 分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层 表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
  • JS采用正则表达式简单获取URL地址栏参数 chiangfai js地址栏参数获取
    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null
  • 怎样将数据表拷贝到powerdesigner (本地数据库表) Array_06 powerDesigner
    ================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自
  • logbackのhelloworld 飞翔的马甲 日志logback
    一、概述 1.日志是啥？ 当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。 这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。 传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作
  • 新浪微博爬虫模拟登陆 随意而生 新浪微博
    转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235     近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。      现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
  • synchronized 香水浓 javathread
        Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
  • maven 简单实用教程 AdyZhang maven
    1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
  • Android 通过 intent传值获得null aijuans android
    我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){            Intent i =
  • apache 做代理 报如下错误：The proxy server received an invalid response from an upstream baalwolf response
    网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
  • Tomcat6 内存和线程配置 BigBird2012 tomcat6
    1、修改启动时内存参数、并指定JVM时区 （在windows server 2008 下时间少了8个小时） 在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：  window下， 在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
  • Karam与TDD bijian1013 KaramTDD
    一.TDD         测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。         TDD的原则很简单： a.只有当某个
  • [Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States bit1129 zookeeper
    public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
  • 【Scala十四】Scala核心八：闭包 bit1129 scala
    Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
  • android发送json并解析返回json ronin47 android
    package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import
  • 一份IT实习生的总结 brotherlamp PHPphp资料php教程php培训php视频
    今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
  • 据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 将重物放到天平左侧，问在两边如何添加砝码 bylijinnan java
    public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 （假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202
  • dom4j最常用最简单的方法 chiangfai dom4j
    要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
  • 简单HBase笔记 chenchao051 hbase
     一、Client-side write buffer 客户端缓存请求 描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。 可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。 二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使
  • mysqldump导出时出现when doing LOCK TABLES daizj mysqlmysqdump导数据
    　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　 导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决
  • CSS渲染原理 dcj3sjt126com Web
      从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？          一、浏览器的发展与CSS           
  • 《阿甘正传》台词 dcj3sjt126com
    Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
  • Java处理JSON dyy_gusi json
    Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。 在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args)
  • win7下nginx和php的配置 geeksun nginx
    1.  安装包准备 nginx :  从nginx.org下载nginx-1.8.0.zip php： 从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口   2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p
  • 基于2.8版本redis配置文件中文解释 hongtoushizi redis
    转载自： http://wangwei007.blog.51cto.com/68019/1548167        在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
  • 第五章 常用Lua开发库3-模板渲染 jinnianshilongnian nginxlua
    动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。   如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
  • JZSearch大数据搜索引擎 颠覆者 JavaScript
    系统简介： 大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
  • 10招让你成为杰出的Java程序员 pda158 java编程框架
    如果你是一个热衷于技术的  Java 程序员， 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。 　　 1. 拥有扎实的基础和深刻理解 OO 原则 　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
  • tomcat之oracle连接池配置 小网客 oracle
    tomcat版本7.0 配置oracle连接池方式： 修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou
  • Oracle 分页算法汇总 vipbooks oraclesql算法.net
        这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他