随着HTML5的越来越火，进行移动应用开发的前端框架也随着火了一把，刚好最近在使用HBuilder+MUI框架进行开发，正好抽空写一些相关的功能操作，很多东西也是慢慢摸索的过程，有写的不好的地方欢迎指正，希望大家能够从中共同学习指正，本文主要介绍的就是在HBuilder+MUI框架进行html5开发中websql数据库的操作方法,以具体实例说明如何通过JavaScript封装的html5操作websql数据库类，关键点已进行代码注释，希望大家可以互相学习进步，觉得不错的欢迎点赞。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<!--适应移动端，需要加下面meta-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>websql数据存储</title>
<!--
作者：Irvin-bin
时间：2016-12-22
描述：以下为mui框架常用文件
-->
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/common.js"></script>
<!--end-->
<script type="text/javascript">
//打开数据库
var db = openDatabase('websqldb','1.0.0','websql demo',204800);
// var db = openDatabase(databasename,version,description,size)
// 该方法有四个参数，作用分别为：
// databasename:数据库名；
// version：数据库版本号，可不填；
// description：数据库描述；
// size：给数据库分配的空间大小；
//保存数据
function save(){
var username = document.getElementById("username").value;
var userno = document.getElementById("userno").value;
var school = document.getElementById("school").value;
//创建时间
var time = new Date().getTime();
db.transaction(function(tx){
// executeSql方法有四个参数，作用分别如下：
// sqlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
// [value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将sql语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中；
// dataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
// errorHandler：执行失败时调用的回调函数；
tx.executeSql('insert into class values(?,?,?,?)',[username,userno,school,time],onSuccess,onError);
});
}
//sql语句执行成功后执行的回调函数
function onSuccess(tx,rs){
alert("操作成功");
load();
}
//sql语句执行失败后执行的回调函数
function onError(tx,error){
alert("操作失败，失败信息："+ error.message);
}
//获取所有数据
function load(){
var list = document.getElementById("list");
db.transaction(function(tx){
//如果数据表不存在，则创建数据表
tx.executeSql('create table if not exists class (username text,userno text,school text,createtime INTEGER)',[]);
//查询所有学生记录
tx.executeSql('select * from class',[],function(tx,rs){
if(rs.rows.length>0){
var result = "<table>";
result += "<tr><th>序号</th><th>姓名</th><th>学号</th><th>学校</th><th>添加时间</th><th>操作</th></tr>";
for(var i=0;i<rs.rows.length;i++){
var row = rs.rows.item(i);
//转换时间，并格式化输出
var time = new Date();
time.setTime(row.createtime);
var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
//拼装一个表格的行节点
result += "<tr><td>"+(i+1)+"</td><td>"+row.username+"</td><td>"+row.userno+"</td><td>"+row.school+"</td><td>"+timeStr+"</td><td><input type='button' value='删除' οnclick='del("+row.userno+")'/></td></tr>";
}
list.innerHTML = result;
}else{
list.innerHTML = "学生信息为空，请添加";
}
});
});
}
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
//根据学号删除学生信息
function del(userno){
// transaction方法使用一个回调函数作为参数，在这个函数中，执行访问数据库的具体操作；
db.transaction(function(tx){
//注意这里需要显示的将传入的参数userno转变为字符串类型
tx.executeSql('delete from class where userno=?',[String(userno)],onSuccess,onError);
});
}
</script>
<style>
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
td {
border-right: 1px solid #C9DAD7;
border-bottom: 1px solid #C9DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
</style>
</head>
<body οnlοad="load()">
<!--header采用mui中封装好的组件“导航栏包含文字和图标”，-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Hello World</h1>
</header>
<div class="mui-content">
<label for="username">姓名：</label>
<input type="text" id="username" name="username" class="text"/>
<br/>
<label for="userno">学号：</label>
<input type="text" id="userno" name="userno"/>
<br/>
<label for="userno">学校：</label>
<input type="text" id="school" name="school"/>
<br/>
<input type="button" οnclick="save()" value="添加学生信息"/>
</div>
<br/>
<div id="list">
</div>
</body>
</html> 
有好的想法或内容欢迎交流学习，本人邮箱bin470398393+@qq.com/@163.com/@126.com。
2658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
