记得就在前几年，Google 的 Google Gears 还存在，HTML5 的规范还没完成，使用 Gears 做过几个项目，发现真是个神奇的东西。
现在，不少浏览器已经支持 WebSql，挺简单使用HTML5的数据库API完成一个表进行增删改查，完成原先了在 Google Gears 里才能完成的功能。
代码
html 文件
<html>
<head>
<meta charset="utf-8"/>
<title>HTML本地数据库基本使用方法</title>
<script src="script.js"></script>
</head>
<body>
<div id="datas">
</div>
<input type="text" id="name" /><input type="button" value="增加" onclick="page.addData();">
</body>
<script>
var page=new Page();
page.qryData();
</script>
</html>
JavaScript 文件
//数据库类，封装数据库，直接进行操作
var DataBase=function(){
this._initDB();
};
DataBase.prototype={
//数据库名称，版本，显示名称，大小
_name:'xdnote',
_version:'1.0',
_display:'xdnote test db',
_size:1024*1024*10,
//初始化
_db:null,
_initDB:function(){
if(this._db==null){
this._db=window.openDatabase(this._name,this._version,this._display,this._size);
}
},
//封装执行SQL方法,参数与原方法一致即可，这里不做扩展
executeSql:function(sql,param,success,error){
var params=param?param:[];
var doSuccess=success?success:function(tx,result){alert('execute success')};
var doError=error?error:function(tx,error){alert(error)};
this._db.transaction(
function(tx){
tx.executeSql(sql,params,doSuccess,doError);
}
);
}
};
//存储类，封装数据的CRUD操作
var Store=function(){
//初始化数据库，创建一个简单的测试表，仅ID,NAME两个字段
//注意写法和ORACLE,SQLSERVER,MYSQL稍有区别。请参照SQLITE语法
var sql = ' CREATE TABLE IF NOT EXISTS names'
+' ( id INTEGER PRIMARY KEY AUTOINCREMENT,'
+' name TEXT )';
this.database=new DataBase();
this.database.executeSql(sql,[],function(){});
};
Store.prototype={
database:null,
_qryListener:null,
_addListener:null,
_delListener:null,
//提供设置回调函数，实现MVC式分离
setListener:function(qryListener,addListener,delListener){
this._qryListener=qryListener;
this._addListener=addListener;
this._delListener=delListener;
},
//查询，增加，删除方法，修改可自行研究，这里不多说明
qry:function(){
var sql='SELECT id,name FROM names';
this.database.executeSql(sql,[],this._qryListener);
},
add:function(name){
var sql='INSERT INTO names (name) values (?)';
this.database.executeSql(sql,[name],this._addListener);
},
del:function(id){
var sql='DELETE FROM names WHERE id=?';
this.database.executeSql(sql,[id],this._delListener);
}
};
//页面类，为页面事件提供方法，初始化页面数据
var Page=function(){
var _self=this;
//初始化三个数据方法的回调函数
var qryListener=function(tx,result){
var size=result.rows.length;
var html='';
for(var i=0;i<size;i++){
var data=result.rows.item(i);
_self._add(data.id,data.name);
}
};
var addListener=function(tx,result){
_self._add(result.insertId,_self._tmpname);
};
var delListener=function(tx,result){
_self._del(_self._tmpid);
};
this.store=new Store();
this.store.setListener(qryListener,addListener,delListener);
}
Page.prototype={
store:null,
_INDEX:'xdname',
_tmpid:null,
_tmpname:'',
//查询、增加、删除数据
qryData:function(){
this.store.qry(name);
},
addData:function(){
var name=document.getElementById("name").value;
this._tmpname=name;
this.store.add(name);
},
delData:function(id){
this._tmpid=id;
this.store.del(id);
},
//增加（与查询共用）、删除数据的页面响应
_add:function(id,name){
var html='<div id="'+this._INDEX+id+'">'
+' <span>'+name+'</span>'
+' <span onclick="page.delData('+id+')">删除</span>'
+'</div>';
var dom=document.getElementById("datas");
dom.innerHTML+=html;
},
_del:function(id){
document.getElementById(this._INDEX+id).style.display="none";
}
};
使用说明
虽然强大，但个人认为用处可能不会太大。原因如下:
- 数据库肯定是放在服务器的，一般不会考虑同步给浏览器吧。
- 前端需要存储数据，更多情况下可能会使用 Cookie 或者 localStorage 等进行存放，单从业务上来讲，存结构性数据的场景并不多。
- 和 Cookie 或者 localStorage 一样，都依赖浏览器的限制，想当年 Google Gears 还能跨浏览器呢。
但是：HTML5 增强了离线功能，如果从这方面去设想，做一些离线应用可能是不错的想法。不用联网也可以打开，那么这个数据库可能就是核心驱动了。