码迷，mamicode.com
首页 > 移动开发 > 详细

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

时间：2014-09-22 00:05:51      阅读：379      评论：0      收藏：0      [点我收藏+]

标签：des   android   style   blog   http   color   io   os   使用   

在上一篇《HTML5本地存储之Web Storage篇》中，简单介绍了如何利用localStorage实现本地存储；实际上，除了sessionStorage和localStorage外，HTML5还支持通过本地数据库进行本地数据存储，HTML5采用的是"SQLite"这种文件型数据库，该数据库多集中在嵌入式设备上，熟悉IOS/Android开发的同学，应该对SQLite数据库比较熟悉。

HTML5中的数据库操作比较简单，主要有如下两个函数：

1、通过openDatabase方法创建一个访问数据库的对象

 

[javascript] view plaincopy
 
  1. var db = openDatabase(databasename,version,description,size)  

该方法有四个参数，作用分别为：

 

 

  • databasename:数据库名；
  • version：数据库版本号，可不填；
  • description：数据库描述；
  • size：给数据库分配的空间大小；

 

2、使用第一步创建的数据库访问对象（如db）执行transaction方法，用来执行事务处理；

 

[javascript] view plaincopy
 
  1. db.transaction(function(tx)){  
  2.     //执行访问数据库的语句  
  3. });  

transaction方法使用一个回调函数作为参数，在这个函数中，执行访问数据库的具体操作；

 

3、通过executeSql方法执行查询

 

[javascript] view plaincopy
 
  1. tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)  

executeSql方法有四个参数，作用分别如下：

 

 

  • sqlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
  • [value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将sql语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中；
  • dataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
  • errorHandler：执行失败时调用的回调函数；

 

本文通过HTML5的数据库支持，重新实现一遍上篇文章中的通讯录管理，待实现功能如下：

 

  • 可创建联系人并保存到数据库中，联系人字段包括：姓名、手机号码、公司、创建时间；
  • 列出当前已保存的所有联系人信息；
  • 可删除特定联系人信息；

 

同样，先准备一个HTML页面，如下：

 

[html] view plaincopy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>HTML5本地存储之本地数据库篇</title>  
  6.     <style>  
  7.         .addDiv{  
  8.             border: 2px dashed #ccc;  
  9.             width:400px;  
  10.             text-align:center;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body onload="loadAll()">  
  15.     <div class="addDiv">     
  16.         <label for="user_name">姓名：</label>  
  17.         <input type="text" id="user_name" name="user_name" class="text"/>  
  18.         <br/>  
  19.         <label for="mobilephone">手机：</label>  
  20.         <input type="text" id="mobilephone" name="mobilephone"/>  
  21.         <br/>  
  22.         <label for="mobilephone">公司：</label>  
  23.         <input type="text" id="company" name="company"/>  
  24.         <br/>  
  25.         <input type="button" onclick="save()" value="新增记录"/>  
  26.     </div>  
  27.     <br/>  
  28.     <div id="list">  
  29.     </div>  
  30. </body>  
  31. </html>  

 

界面展现如下：

bubuko.com,布布扣
要实现创建新联系人并存入数据库功能，需要如下简单的JS代码：

 

[javascript] view plaincopy
 
  1. //打开数据库  
  2. var db = openDatabase(‘contactdb‘,‘‘,‘local database demo‘,204800);  
  3.   
  4. //保存数据  
  5. function save(){  
  6.     var user_name = document.getElementById("user_name").value;  
  7.     var mobilephone = document.getElementById("mobilephone").value;  
  8.     var company = document.getElementById("company").value;  
  9.     //创建时间  
  10.     var time = new Date().getTime();  
  11.     db.transaction(function(tx){  
  12.         tx.executeSql(‘insert into contact values(?,?,?,?)‘,[user_name,mobilephone,company,time],onSuccess,onError);  
  13.     });  
  14. }  
  15.  //sql语句执行成功后执行的回调函数  
  16. function onSuccess(tx,rs){  
  17.     alert("操作成功");  
  18.     loadAll();  
  19. }  
  20. //sql语句执行失败后执行的回调函数  
  21. function onError(tx,error){  
  22.     alert("操作失败，失败信息："+ error.message);  
  23. }  

要展现当前所有已保存的联系人列表，可通过如下JS代码实现：

 

 

[javascript] view plaincopy
 
  1. //将所有存储在sqlLite数据库中的联系人全部取出来  
  2. function loadAll(){  
  3.     var list = document.getElementById("list");  
  4.     db.transaction(function(tx){  
  5.         //如果数据表不存在，则创建数据表  
  6.         tx.executeSql(‘create table if not exists contact(name text,phone text,company text,createtime INTEGER)‘,[]);  
  7.         //查询所有联系人记录  
  8.         tx.executeSql(‘select * from contact‘,[],function(tx,rs){  
  9.            if(rs.rows.length>0){  
  10.                 var result = "<table>";  
  11.                 result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";  
  12.                 for(var i=0;i<rs.rows.length;i++){  
  13.                     var row = rs.rows.item(i);  
  14.                     //转换时间，并格式化输出  
  15.                     var time = new Date();  
  16.                     time.setTime(row.createtime);  
  17.                     var timeStr = time.format("yyyy-MM-dd hh:mm:ss");  
  18.                     //拼装一个表格的行节点  
  19.                     result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type=‘button‘ value=‘删除‘ onclick=‘del("+row.phone+")‘/></td></tr>";  
  20.                 }  
  21.                 list.innerHTML = result;  
  22.            }else{  
  23.                 list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";  
  24.            }   
  25.         });  
  26.     });  
  27. }  

其中，涉及到格式化时间的format函数，可参考如下JS实现：

 

 

[javascript] view plaincopy
 
  1. Date.prototype.format = function(format)  
  2. {  
  3.     var o = {  
  4.     "M+" : this.getMonth()+1, //month  
  5.     "d+" : this.getDate(),    //day  
  6.     "h+" : this.getHours(),   //hour  
  7.     "m+" : this.getMinutes(), //minute  
  8.     "s+" : this.getSeconds(), //second  
  9.     "q+" : Math.floor((this.getMonth()+3)/3),  //quarter  
  10.     "S" : this.getMilliseconds() //millisecond  
  11.     }  
  12.     if(/(y+)/.test(format)) format=format.replace(RegExp.$1,  
  13.     (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
  14.     for(var k in o)if(new RegExp("("+ k +")").test(format))  
  15.     format = format.replace(RegExp.$1,  
  16.     RegExp.$1.length==1 ? o[k] :  
  17.     ("00"+ o[k]).substr((""+ o[k]).length));  
  18.     return format;  
  19. }  

最后，界面实现效果如下：

 

bubuko.com,布布扣
要实现具体某个联系人，需执行如下JS代码：

 

[javascript] view plaincopy
 
  1. //删除联系人信息  
  2. function del(phone){  
  3.      db.transaction(function(tx){  
  4.         //注意这里需要显示的将传入的参数phone转变为字符串类型  
  5.         tx.executeSql(‘delete from contact where phone=?‘,[String(phone)],onSuccess,onError);  
  6.     });  
  7. }  

 

 

如上截图中的表格样式，可参考如下CSS代码：

 

[css] view plaincopy
 
    1. th {  
    2.     font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  
    3.     color: #4f6b72;  
    4.     border-right: 1px solid #C1DAD7;  
    5.     border-bottom: 1px solid #C1DAD7;  
    6.     border-top: 1px solid #C1DAD7;  
    7.     letter-spacing: 2px;  
    8.     text-transform: uppercase;  
    9.     text-align: left;  
    10.     padding: 6px 6px 6px 12px;  
    11. }  
    12. td {  
    13.     border-right: 1px solid #C9DAD7;  
    14.     border-bottom: 1px solid #C9DAD7;  
    15.     background: #fff;  
    16.     padding: 6px 6px 6px 12px;  
    17.     color: #4f6b72;  
    18. }  

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

标签：des   android   style   blog   http   color   io   os   使用   

原文地址：http://www.cnblogs.com/lvfeilong/p/5435fdgdfgf.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！