HTML5WebSQL四种基本操作的介绍

来源：动视网责编：小采时间：2020-11-27 15:04:01

HTML5WebSQL四种基本操作的介绍

HTML5WebSQL四种基本操作的介绍:本篇文章给大家带来的内容是关于HTML5 WebSQL四种基本操作的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Web SQL数据库API是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。我们通过一个

推荐度：

点击下载本文 文档为doc格式

导读HTML5WebSQL四种基本操作的介绍:本篇文章给大家带来的内容是关于HTML5 WebSQL四种基本操作的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Web SQL数据库API是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。我们通过一个

本篇文章给大家带来的内容是关于HTML5 WebSQL四种基本操作的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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”的数据库表，并且插入一条记录进去，然后从数据库表中读取中来，打印在浏览器上。