<!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" 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 id="add" type="button" value="新增记录" /> </div> <br /> <div id="list"> </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>