`
huoquan
  • 浏览: 27286 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

HTML5本地存储之Database Storage篇

前端web框架UIJQUERY 
阅读更多

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

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

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

.代码  收藏代码
  1. var db = openDatabase(databasename,version,description,size)  

 

 

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

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

.代码  收藏代码
  1. db.transaction(function(tx)){  
  2.     //执行访问数据库的语句  
  3. });  

 

 

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

3、通过executeSql方法执行查询

.代码  收藏代码
  1. tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)  

 

 

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

  • sqlQuery：需要具体执行的sql语句，可以是create、select、update、delete；

  • [value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将sql语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中；

  • dataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；

  • errorHandler：执行失败时调用的回调函数；

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

  • 可创建联系人并保存到数据库中，联系人字段包括：姓名、手机号码、公司、创建时间；

  • 列出当前已保存的所有联系人信息；

  • 可删除特定联系人信息；

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

分享一个最好用的UI前端框架！

.代码  收藏代码
  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>  

 

 

界面展现如下：


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

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

 

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

分享一个最好用的UI前端框架！

.代码  收藏代码
  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实现：

.代码  收藏代码
  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. }  

 

 

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

分享一个最好用的UI前端框架！


要实现具体某个联系人，需执行如下JS代码：

.代码  收藏代码
  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代码： 

分享一个最好用的UI前端框架！

.代码  收藏代码
  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. }  
0
顶
0
踩
分享到：
| 29个非常优秀的纹理背景网站设计
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5本地存储之Database Storage应用介绍

    HTML5的本地存储机制扩展了Web应用程序的能力，使得开发者可以在用户浏览器中持久化地存储数据。在HTML5之前，Web应用程序依赖于Cookie来存储少量信息，但Cookie由于大小限制和性能原因并不适合大量数据的存储。...

    HTML5本地存储——Web SQL Database

    Web SQL Database是HTML5本地存储的一种方式，它引入了一个完整的SQLite数据库系统，使得Web应用可以执行结构化的查询来管理和操作数据。 Web SQL Database为Web开发者提供了一种强大的数据存储解决方案，特别是...

    使用jquery-mobile+html5实现android本地通讯录

    HTML5则引入了许多新特性，其中包括Web存储（Web Storage）和离线缓存（App Cache），这些都为本地数据操作提供了可能。特别是Web SQL Database或IndexedDB，它们允许在浏览器中存储大量结构化数据，可以用于备份或...

    sql-web.zip_html5_html5 database

    Web SQL提供了一个客户端的SQLite数据库，允许网页应用在用户的浏览器上本地存储大量结构化数据。这样，即使在网络连接不稳定或断开的情况下，应用也能继续运行。 HTML5的Web SQL数据库主要包含以下核心概念： 1. ...

    基于html5的localstorage的本地存储数据库.zip

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库，这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

    html5本地存储web sql数据库操作增删查找实例

    HTML5的本地存储是Web应用程序离线运行的关键技术之一，其中Web SQL数据库是早期实现本地存储的方式之一。本文将深入探讨HTML5中的Web SQL数据库，包括它的创建、表格操作以及数据的增删查改。 首先，Web SQL数据库...

    html5离线存储

    HTML5离线存储技术通过离线资源缓存、在线状态检测和本地数据存储等方式，为Web应用提供了强大的离线功能。这不仅提高了用户体验，也为开发人员提供了更多的可能性。随着HTML5标准的不断发展和完善，未来还将有更多...

    html5使用本地sqlite数据库

    HTML5的离线存储功能是通过一种叫做Web Storage的技术实现的，其中SQLite数据库是其中的一部分，主要用于在用户浏览器中存储大量结构化数据。这个技术在移动应用开发中尤其有用，尤其是当应用程序需要在离线状态下...

    HTML5-本地数据库.rar

    HTML5是现代网页开发的重要标准，它引入了许多新特性，其中本地数据库功能是提升Web应用程序离线可用性和数据存储能力的关键。这个“HTML5-本地数据库.rar”压缩包可能包含了关于如何利用HTML5的离线存储机制来创建...

    HTML5中的本地数据应用

    尽管本地存储提供了便利，但也需注意数据安全和隐私问题。开发者应确保正确处理用户数据，遵守数据保护法规，并防止恶意软件对数据的滥用。 6. **替代方案与新进展**： 随着技术的进步，Service Worker和Indexed...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    HTML5的Web Storage技术是网页应用中数据存储的重要方式，相较于传统的Cookie，它提供了更高效、更大容量的本地存储能力。Web Storage分为两种类型：localStorage和sessionStorage。 1. localStorage： ...

    基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库.zip

    "基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库.zip" 提供的可能是一个JavaScript库，帮助开发者更容易地利用IndexedDB进行数据管理。 IndexedDB 是 HTML5 中的一种NoSQL数据库，它的主要优点在于能够存储...

    HTML5 完全手册 轻松幽默完美掌握HTML5语法

    本篇文章将深入探讨HTML5的三个关键应用领域：本地存储、离线应用以及WebSocket通信。 首先，HTML5的本地存储极大地提升了网页应用的数据管理能力。传统的Cookie技术由于存储空间有限，且每次请求都会发送到服务器...

    html5离线存储.pdf

    3. 本地数据存储：HTML5提供了两种本地数据存储机制——DOM Storage（包括localStorage和sessionStorage）和Web SQL Database。DOM Storage提供键值对的存储方式，数据持久化，可用于保存用户设置、游戏进度等。Web ...

    HTML5存储学习笔记

    HTML5存储是现代Web开发中的一个重要特性，它允许应用程序在用户浏览器上本地存储数据，无需服务器的参与。这种存储方式可以极大地提升Web应用的性能，因为它减少了与服务器的交互次数，尤其是在离线或网络不稳定的...

    《Head First HTML5 Programming 中文版》 绝对高清 带书签 150M

    此外，HTML5还提供了Web Storage（本地存储）和Web SQL Database（已废弃）等存储机制，这些在书中也会有详细阐述，帮助读者理解如何在客户端存储和管理数据。 除了HTML5，本书还会涉及与之紧密相关的JavaScript和...

    html5 手机端类型的APP

    3. **本地存储（Web Storage）**：HTML5的Web Storage包括Session Storage和Local Storage，比传统的Cookie提供更大的存储空间，更高效的数据管理，使WebApp能保存用户数据和状态。 4. **Web Workers和Web SQL ...

    html5权威指南

    HTML5为Web应用提供了客户端存储的能力，如Web Storage（包括localStorage和sessionStorage）、Web SQL Database以及IndexedDB等。这些技术使得网页能够保存数据到本地，提高应用的加载速度，并在离线状态下也能使用...

Magicbox
Global site tag (gtag.js) - Google Analytics