<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5本地存储之本地数据库篇</title>
<style>
.addDiv {
border: 2px dashed #ccc;
width: 400px;
text-align: center;
}
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>
<div class="addDiv">
<label for="user_name">姓名：</label>
<input type="text" name="user_name" class="text" />
<br />
<label for="mobilephone">手机：</label>
<input type="text" name="mobilephone" />
<br />
<label for="mobilephone">公司：</label>
<input type="text" name="company" />
<br />
<input type="button" value="新增记录" />
</div>
<br />
<div >
</div>
<script type="text/javascript">
//打开数据库
var db = openDatabase('contactdb', '', 'local database demo', 204800);
window.onload = function () {
loadAll();
}
$('#add').onclick = function () {
save();
}
//保存数据
function save() {
var user_name = $('#user_name').value;
var mobilephone = $('#mobilephone').value;
var company = $('#company').value;
//创建时间
var time = new Date().getTime();
db.transaction(function (tx) {
tx.executeSql('insert into contact values(?,?,?,?)', [user_name, mobilephone, company, time],
onSuccess, onError);
});
}
//刷新数据库 并渲染
function loadAll() {
var list = $('#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>name姓名</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.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 = "目前数据为空，赶紧开始加入联系人吧";
}
});
});
}
//删除信息
function del(phone) {
db.transaction(function (tx) {
tx.executeSql('delete from contact where phone=?', [String(phone)], onSuccess, onError);
});
}
//sql语句执行成功后执行的回调函数
function onSuccess(tx, rs) {
alert("操作成功");
loadAll();
}
//sql语句执行失败后执行的回调函数
function onError(tx, error) {
alert("操作失败，失败信息：" + error.message);
}
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds()
}
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 $(s) {
return document.querySelector(s);
}
</script>
</body>
</html>