HTML5当地储存之Database Storage运用详细介绍

日期:2020-09-17 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

在上1篇《HTML5当地储存之Web Storage篇》中,简易详细介绍了怎样运用localStorage完成当地储存;具体上,除sessionStorage和localStorage外,HTML5还适用根据当地数据信息库开展当地数据信息储存,HTML5选用的是"SQLLite"这类文档型数据信息库,该数据信息库多集中化在嵌入式机器设备上,熟习IOS/Android开发设计的同学,应当对SQLLite数据信息库较为熟习。
HTML5中的数据信息库实际操作较为简易,关键有以下两个涵数:
1、根据openDatabase方式建立1个浏览数据信息库的目标

拷贝编码
编码以下:

var db = openDatabase(databasename,version,description,size)

该方式有4个主要参数,功效各自为:
databasename:数据信息库名;
version:数据信息库版本号号,可不填;
description:数据信息库叙述;
size:给数据信息库分派的室内空间尺寸;
2、应用第1步建立的数据信息库浏览目标(如db)实行transaction方式,用来实行事务管理解决

拷贝编码
编码以下:

db.transaction(function(tx)){
//实行浏览数据信息库的句子
});

transaction方式应用1个回调函数涵数做为主要参数,在这个涵数中,实行浏览数据信息库的实际实际操作;
3、根据executeSql方式实行查寻

拷贝编码
编码以下:

tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

executeSql方式有4个主要参数,功效各自以下:
sqlQuery:必须实际实行的sql句子,能够是create、select、update、delete;
[value1,value2..]:sql句子中全部应用到的主要参数的数字能量数组,在executeSql方式中,将sql句子中所要应用的主要参数先用“?”替代,随后先后将这些主要参数构成数字能量数组放在第2个主要参数中;
dataHandler:实行取得成功是启用的回调函数涵数,根据该涵数能够得到查寻結果集;
errorHandler:实行不成功时启用的回调函数涵数;
本文根据HTML5的数据信息库适用,再次完成1遍上篇文章内容中的通信录管理方法,待完成作用以下:
可建立联络人并储存到数据信息库中,联络人字段包含:名字、手机上号码、企业、建立時间;
列出当今已储存的全部联络人信息内容;
可删掉特殊联络人信息内容;
一样,先提前准备1个HTML网页页面,以下

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf⑻"/>
<title>HTML5当地储存之当地数据信息库篇</title>
<style>
.addDiv{
border: 2px dashed #ccc;
width:400px;
text-align:center;
}
</style>
</head>
<body onload="loadAll()">
<div class="addDiv">
<label for="user_name">名字:</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手机上:</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<label for="mobilephone">企业:</label>
<input type="text" id="company" name="company"/>
<br/>
<input type="button" onclick="save()" value="新增纪录"/>
</div>
<br/>
<div id="list">
</div>
</body>
</html>

页面呈现以下:

要完成建立新联络人并存入数据信息库作用,必须以下简易的JS编码:

拷贝编码
编码以下:

//开启数据信息库
var db = openDatabase('contactdb','','local database demo',204800);
//储存数据信息
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value;
//建立時间
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
});
}
//sql句子实行取得成功后实行的回调函数涵数
function onSuccess(tx,rs){
alert("实际操作取得成功");
loadAll();
}
//sql句子实行不成功后实行的回调函数涵数
function onError(tx,error){
alert("实际操作不成功,不成功信息内容:"+ error.message);
}

要呈现当今全部已储存的联络人目录,可根据以下JS编码完成:

拷贝编码
编码以下:

//将全部储存在sqlLite数据信息库中的联络人所有取下来
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//假如数据信息表不存在,则建立数据信息表
tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
//查寻全部联络人纪录
tx.executeSql('select * from contact',[],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");
//组装1个报表的行连接点
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>";
}
list.innerHTML = result;
}else{
list.innerHTML = "现阶段数据信息为空,赶快刚开始添加联络人吧";
}
});
});
}

在其中,涉及到到文件格式化時间的format涵数,可参照以下JS完成

拷贝编码
编码以下:

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;
}

最终,页面完成实际效果以下:
 
要完成实际某个联络人,需实行以下JS编码

拷贝编码
编码以下:

//删掉联络人信息内容
function del(phone){
db.transaction(function(tx){
//留意这里必须显示信息的将传入的主要参数phone变化为标识符串种类
tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);
});
}

如上截图中的报表款式,可参照以下CSS编码

拷贝编码
编码以下:

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;
}