HTML5 Web SQL 数据库

什么是Web SQL

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数，创建回调会在创建数据库后被调用。

以下为数据库的增删改查操作

增加数据

在执行上面的创建表语句后，我们可以插入一些数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

我们也可以使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

删除指定的数据id也可以是动态的：

db.transaction(function(tx) {tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新记录

更新记录使用的格式如下：

db.transaction(function (tx) {tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

更新指定的数据id也可以是动态的：

db.transaction(function(tx) {tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

查询记录

以下实例演示了如何读取数据库中已经存在的数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});db.transaction(function (tx) {tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {var len = results.rows.length, i;msg = "<p>查询记录条数: " + len + "</p>";document.querySelector('#status').innerHTML +=  msg;for (i = 0; i < len; i++){alert(results.rows.item(i).log );}}, null);
});

以下是完整的示例

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>菜鸟教程(runoob.com)</title> <script type="text/javascript">var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);var msg;db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');msg = '<p>数据表已创建，且插入了两条数据。</p>';document.querySelector('#status').innerHTML =  msg;});db.transaction(function (tx) {tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {var len = results.rows.length, i;msg = "<p>查询记录条数: " + len + "</p>";document.querySelector('#status').innerHTML +=  msg;for (i = 0; i < len; i++){msg = "<p><b>" + results.rows.item(i).log + "</b></p>";document.querySelector('#status').innerHTML +=  msg;}}, null);});</script></head><body><div id="status" name="status">状态信息</div></body></html>

HTML5 Web SQL 数据库相关推荐

HTML5 Web SQL数据库
HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 We ...
html日期写入数据库,javascript – 在HTML5 Web SQL数据库中对日期时间进行排序
我无法找到解决问题的方法. 我有一个HTML5 Web SQL数据库,其表格如下: db.transaction(function(tx) { tx.executeSql("CREATE T ...
html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗？(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...
HTML5 Web SQL 数据库讲解及使用
为什么页面刷新后表就没了?openDatabase是什么?openDatabase是浏览器提供的吗? Web SQL 是在浏览器上模拟数据库,可以使用 JS 来操作 SQL 完成对数据的读写. Web ...
html中使用sql数据库,Web Sql数据库的使用详解|HTML5
HTML5中的Web Sql数据库在实际应用中并不是很多,本人只看到w3schools这种教学网才用到websql,目前也只有Webkit(Safari,SafariMobile和Chrome)和Op ...
websql mysql_HTML5 Web SQL 数据库 | 菜鸟教程
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该很容易理解 SQ ...
16.Web SQL数据库
1.Web SQL数据库 1.Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 2.核心方法 1.ope ...
HTML5 Web SQL
Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库. 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多 ...
html5 indexeddb 排序,HTML5 IndexedDB，Web SQL数据库和浏览器大战
根据您在iOS上对Safari的要求,除了WebSQL之外别无选择 . 其他移动浏览器(如Opera和Opera)支持WebSQL黑莓 . 即使他们有IndexedDB,我也不认为他们会删除WebSQ ...
web sql数据库存储位置
不同的浏览器存储的位置是不同的. 谷歌浏览器存储的位置是 C:\Users\你的电脑牌子英文名\AppData\Local\Google\Chrome\User Data\Default 例如: C: ...