Web SQL数据库API是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。
我们通过一个简单的例子来了解下如何使用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.log("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.log("table created successfully..." + Date.now());
resovle();
}
function createDatabase() {
return new Promise(function(resovle, reject) {
console.log("prepare to create database..." + Date.now());
this._db = openDatabase('mydb', '1.0', 'JerryTestdb', 1024);
setTimeout(_createDatabaseOK.bind(this, resovle), 1000);
});
}
function _createDatabaseOK(resovle) {
console.log("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.log("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.log("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.log(" working..." + Date.now());
}
}
setupDB();
var handle = setInterval(work, 200);
</script>
</head>
</html>
在浏览器里执行这个应用，会创建一个名叫mydb的数据库，里面一张名为“user”的数据库表，并且插入一条记录进去，然后从数据库表中读取中来，打印在浏览器上。
下面就来分析下这90行代码。
程序的入口是setupDB这个函数，下面的setInterval起了1个间隔为200毫秒的周期执行函数，为了模拟当前浏览器除了进行Web SQL数据库外，还有其他的任务再执行。
setupDB
用promise实现了一个链式调用，第九行代码从语义上来说很容易理解：首先创建数据库(createDatabase)，然后创建数据库表(createTable)，然后插入一条记录到数据库表里(insertEntry), 然后马上把刚才插入表里的记录读出来(readEntry)。最后打印到浏览器上。
大家看我第16行的_createDatabaseOK的函数延时1秒执行，仅仅是为了演示WebSQL API 异步调用的最佳实践。
createDatabase函数的第15行，调用了Web SQL API的openDatabase，创建了一个名为mydb的数据库。openDatabase会返回一个数据库句柄，我们保存在属性_db里以便后续使用。
createTable
使用前一步骤得到的数据库句柄，通过数据库句柄暴露的API transaction, 执行一个数据库事务。事务的具体内容是一个SQL语句，通过executeSql调用来创建数据库表：
create table if not exists user(id unique, user, passwd)
用过JDBC的朋友对这种写法应该很熟悉。
数据库表明为user，主键为id，有两个列user和passwd。
insertEntry
在前一步骤中创建的user数据库表中插入一行记录，id为1，user值为Jerry，passwd为1234。
insert into user values (1,'Jerry','1234')
readEntry
还是通过第一步创建的数据库句柄_db, 执行一个数据库事务，内容为SELECT语句，从user表里读出所有记录。
如果想清除掉Web SQL里的数据库表，在Chrome开发者工具里点击Clear storage：
选中您要清除的Storage类型，点“Clear Site Data"即可。
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
4. **Web安全**：学习基本的网络安全知识，如如何防止SQL注入和XSS攻击。 5. **响应式设计**：掌握如何使网页适应不同屏幕尺寸的设备，提升用户体验。 通过这个项目，你可以全面了解一个Web应用的开发流程，并提高...
4. **数据库连接**：ASP可以通过ADO（ActiveX Data Objects）轻松地连接到各种数据库，如SQL Server、Access等，进行数据查询、添加、更新和删除操作。 5. **服务器端控件**：ASP支持服务器端控件，这些控件可以在...
通过实际操作这些代码，你可以了解到Web开发中的常见模式，例如如何设计数据库模型，如何构建动态网页，以及如何实现用户登录和权限控制等。 此外，书中还可能涉及一些现代Web开发趋势，比如使用PHP框架（如Laravel...
3. SQL Server 2000管理：理解SQL Server的架构，如数据库、表、索引、视图等基本概念，学会创建和管理数据库对象，以及使用T-SQL进行数据操作。 4. 面向对象编程：PHP5.0引入了完整的面向对象特性，包括类、对象、...
HTML5是Web开发的一个重大突破，它引入了许多新特性，其中一项便是离线存储功能，这使得在没有网络连接的情况下也能访问部分Web应用。这个压缩包"html5数据库运用.rar"显然关注的是HTML5中的离线数据库技术，通常...
其语法简洁且功能强大，允许开发者通过嵌入到HTML代码中来创建交互式的Web页面。在本书中，PHP的示例涵盖了基础语法、变量、条件语句、循环、数组、函数、类和对象、错误处理以及文件系统操作等多个方面，这些是任何...
4. **SQL语言**：深入学习SQL查询语言，包括SELECT、INSERT、UPDATE和DELETE语句，以及更复杂的JOIN、GROUP BY、HAVING等操作。 5. **数据绑定和控件**：学习如何使用ASP控件（如DataGrid、DetailsView等）来显示和...
通过阅读《Web程序设计 第5版》，读者不仅可以系统学习上述各方面的理论知识，还能通过实例练习提升实际操作能力。不断更新的Web技术要求开发者持续学习，这本书无疑是掌握最新Web开发趋势的一个好帮手。
在IT行业中，PHP（Hypertext Preprocessor）是一种广泛使用的开放源代码脚本语言，尤其在Web开发领域占据着重要地位。"10天学会PHP"这个标题表明这是一个旨在帮助初学者快速掌握PHP基础的教程，可能是通过一系列的...
MVC（Model-View-Controller）是一种广泛应用于Web开发的设计模式，它将应用程序的业务逻辑、数据处理和用户界面分离开来，提高了代码的可维护性和可扩展性。MVC5是.NET Framework中的一个版本，提供了更强大的功能...
在源代码04-06中，读者可以找到上述各章节对应的示例代码，通过亲手运行和调试，加深对理论知识的理解，提升实际操作能力。这些代码不仅是学习的辅助材料，也是日后开发工作的宝贵参考资料。总的来说，这一部分的...
PHP，全称“Hypertext Preprocessor”，是一种广泛使用的开源脚本语言，尤其适用于Web开发。这个"十天学会PHP教程"显然是一个精心设计的学习计划，旨在帮助初学者在短时间内掌握PHP的基础知识和实践技能。下面，我们...
4. **SQL查询**：学习SELECT、INSERT、UPDATE、DELETE等基本查询，以及更复杂的JOIN操作、子查询、聚合函数和分组。 5. **预处理语句和参数绑定**：用于防止SQL注入，如使用`mysqli_prepare()`和`PDO::prepare()`。...
5. Web交互与表单处理：通过HTTP协议，PHP可以接收和响应用户的请求，处理HTML表单数据。学会创建动态网页，包括表单验证、文件上传、会话管理以及cookies的使用，是Web开发中的重要技能。 6. 安全实践：安全是Web...
4. 本地存储API：Web Storage和Web SQL Database提供本地数据存储，增强Web应用的离线功能。 5. Geolocation API：获取用户的地理位置信息，为地理位置相关的应用提供便利。 6. Web Workers和Web Socket：利用多线程...
《12天学会Web标准》课程是一门专为初学者设计的全面且深入的Web开发教程，旨在帮助学习者在短时间内掌握Web开发的核心技术。在这个压缩包中包含的主要资源是"12天学会Web标准.exe"，这可能是一个可执行程序，用于...
ASP（Active Server Pages）是一种由微软开发的服务器端脚本环境，用于生成动态网页或Web应用程序。本教程“十天学会ASP网页教程”旨在帮助初学者在短时间内掌握ASP的基础知识和实际应用，通过实例——ASP留言板的...
5. **MVC模式与框架**：在Java Web开发中，Model-View-Controller（MVC）模式是一种常见的架构模式，有助于组织代码。读者需要了解Struts、Spring MVC或JSF等流行的MVC框架。 6. **JavaBean**：JavaBean是Java编程...
JavaWeb实训代码是一个针对学生学习和实践的资源集合，它涵盖了JavaWeb开发的基本概念和技术。...通过深入研究这些代码，学生不仅可以了解JavaWeb开发的基本流程，还能提升编程技能，为今后的Web开发工作打下坚实基础。