通用标准数据库应用程序接口是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。

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

！声明文档类型

超文本标记语言

头

脚本

var end

函数setupDB(){

返回this.createDatabase().然后（创建表格)。然后（插入条目)。然后(朗读).然后（打印结果);

}

函数createTable(){

返回新承诺（功能（回复，拒绝){

console.log('准备创建表.'约会。now())；

这个. db。事务(函数(查询){

query.executeSql('如果不存在则创建表用户(id，用户，passwd)')；

});

setTimeout(_ createtableok。bind(this，resovle)，1000)；

});

}

function _ CreateTableok(resov le){

console.log('表创建成功.'约会。now())；

resov le()；

}

函数createDatabase(){

返回新承诺（功能（回复，拒绝){

console.log('准备创建数据库.'约会。now())；

这个. db _=OpenDatabaSe(' mydb '，' 1.0 '，' JerryTestdb '，1024)；

setTimeout(_ CreateDatabaseOk。bind(this，resovle)，1000)；

});

}

function _ CreateDatabaseok(resov le){

console.log('数据库创建成功.'约会。now())；

resovle(这个. db)；

}

函数insertEntry(){

返回新承诺（功能（解决，拒绝){

这个. db。事务(函数(查询){

query.executeSql('插入用户值(1，‘杰里’，‘1234’))；

});

setTimeout(_ insertentryok。bind(this，resolve)，1000)；

});

}

function _ insertEntryOK(resolve){

console.log('条目已成功插入到表中.'约会。now())；

resolve()；

}

函数readEntry() {

返回新承诺（功能（解决，拒绝){

这个. db。事务(函数(查询){

查询。ExecuteSQL(' select * from user '，[]，function(u，results) {

setTimeout(_ ReadentryK。bind(this，resolve，results)，1000)；

});//查询结束executeSql .

} //函数结束（查询)

);//到此结束. db.transaction

});

}

function _ ReadentryK(resolve，or result){

console.log('成功从数据库中读取条目.'约会。now())；

解决(或sult)；

}

函数打印结果(结果){

for(var I=0；我还是成绩。划船。长度；i ) {

文件。writeln(' id : ' OreSults。第[一]行.id)；

文件。writeln(' user : ' or sults。第[一]行.用户);

文件。writeln(' passwd : ' or sults。第[一]行.passwd)；

}

end=true

}

function work(){

if(end ){

clearInterval(句柄);

}

else{

console.log('工作中.'约会。now())；

}

}

setup db()；

var handle=setInterval(work，200)；

/script

/head

/html

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

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

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

setupDB

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

大家看我第16行的_创建数据库确定的函数延时一秒执行，仅仅是为了演示WebSQL API异步调用的更佳实践。

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

创建数据表

使用前一步骤得到的数据库句柄，通过数据库句柄暴露的应用程序接口事务，执行一个数据库事务。事务的具体内容是一个结构化查询语言语句，通过executeSql调用来创建数据库表：

如果不存在，则创建表用户(id，用户，密码)

用过JDBC的朋友应该都很熟悉这种写法。

数据库显示为用户，主键为id，有两列，用户和密码。

插入条目

在上一步创建的用户数据库表中，插入一行id为1、用户值为Jerry、密码为1234的记录。

插入用户值(1，“杰里”，“1234”)

读者

或者通过步创建的database handle _db，执行一个数据库事务，内容是一个SELECT语句，并从用户表中读取所有记录。

如果要清除网络SQL中的数据库表，请单击Chrome开发工具中的清除存储：

选择要清除的存储类型，然后单击“清除站点数据”。