通过90行代码学会HTML5 WebSQL的4种基本操作

2019-09-08 郑州网站建设  

Web SQL数据库API是一个独立的规范,在浏览器层面提供了本地对结构化数据的存储,已经被很多现代浏览器支持了。

通过90行代码学会HTML5 WebSQL的4种基本操作

通过90行代码学会HTML5 WebSQL的4种基本操作

我们通过一个简单的例子来了解下怎么使用Web SQL API在浏览器端创建数据库表并存储数据。

<!doctype html>

<html>

<head>

<script>

var end;

function setupDB(){

return this.createDatabase().then(createTable).then(insertEntry).then(readEntry).then(printResult);

}

function createTable(){

return new Promise(function(resovle, reject) {

console.日志("prepare to create table..." + Date.now());

this._db.transaction(function(query){

query.executeSql('create table if not exists user(id unique, user, passwd)');

});

setTimeout( _createTableOK.bind(this, resovle), 1000);

});

}

function _createTableOK(resovle){

console.日志("table created successfully..." + Date.now());

resovle();

}

function createDatabase(){

return new Promise(function(resovle, reject) {

console.日志("prepare to create database..." + Date.now());

this._db = openDatabase('mydb','1.0', 'JerryTestdb',1024);

setTimeout( _createDatabaseOK.bind(this, resovle), 1000);

});

}

function _createDatabaseOK(resovle){

console.日志("database created successfully..." + Date.now());

resovle(this._db);

}

function insertEntry(){

return new Promise(function(resolve, reject) {

this._db.transaction(function(query){

query.executeSql("insert into user values (1,'Jerry','1234')");

});

setTimeout( _insertEntryOK.bind(this, resolve), 1000);

});

}

function _insertEntryOK(resolve){

console.日志("entry inserted to table successfully..." + Date.now());

resolve();

}

function readEntry() {

return new Promise(function(resolve, reject) {

this._db.transaction( function(query) {

query.executeSql('select * from user',[],function(u,results) {

setTimeout( _readEntryOK.bind(this, resolve, results), 1000);

}); // end of query.executeSql

} // end of function(query)

); // end of this._db.transaction

});

}

function _readEntryOK(resolve, oResult){

console.日志("entry readed from DB successfully..." + Date.now());

resolve(oResult);

}

function printResult(oResults){

for( var i = 0; i < oResults.rows.length; i++) {

document.writeln('id: ' + oResults.rows[i].id);

document.writeln('user: ' + oResults.rows[i].user);

document.writeln('passwd: ' + oResults.rows[i].passwd);

}

end = true;

}

function work(){

if( end ){

clearInterval(handle);

}

else{

console.日志(" working..." + Date.now());

}

}

setupDB();

var handle = setInterval( work, 200);

</script>

</head>

</html>

在浏览器里执行这个应用,会创建一个名叫mydb的数据库,里面一张名为“user”的数据库表,并且插入一条记录进去,然后从数据库表中读取中来,打印在浏览器上。

通过90行代码学会HTML5 WebSQL的4种基本操作

下面就来分析下这90行代码。

程序的入口是setupDB这个函数,下面的setInterval起了1个间隔为200毫秒的周期执行函数,为了模拟当前浏览器除了进行Web SQL数据库外,还有其他的任务再执行。

通过90行代码学会HTML5 WebSQL的4种基本操作

setupDB

用promise实现了一个链式调用,第九行代码从语义上来说很容易理解:首先创建数据库(createDatabase),然后创建数据库表(createTable),然后插入一条记录到数据库表里(insertEntry), 然后马上把刚才插入表里的记录读出来(readEntry)。最后打印到浏览器上。

大家看我第16行的_createDatabaseOK的函数延时1秒执行,仅仅是为了演示WebSQL API 异步调用的最佳实践。

createDatabase函数的第15行,调用了Web SQL API的openDatabase,创建了一个名为mydb的数据库。openDatabase会返回一个数据库句柄,我们保存在属性_db里以便后续使用。

通过90行代码学会HTML5 WebSQL的4种基本操作

createTable


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1263.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • WEB
  • д
  • 数据
  • SQL
  • 90
  • WebSQL4