HTML5 Web SQL
来源:互联网 发布:java知识地图软件 编辑:程序博客网 时间:2024/05/01 19:14
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
三个核心方法:
- openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
- executeSql:这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明:
- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调
第五个参数,创建回调会在创建数据库后被调用。
查看创建的数据库
在Chrome中使用SQLite API 存储数据后,我们可以在控制台的resources(我的是在Application)中可以看到,如图:
我们也可以在
C:\Users\{username}\AppData\Local\Google\Chrome\User Data\Default\databases\
这个目录中找到数据文件,然后可以利用数据库软件将文件打开查看。
Firefox 的数据存储在C:\Users\your-account-name\AppData\Local\Mozilla\Firefox\Profiles\
目录下。
执行查询操作
执行操作使用 database.transaction() 函数:
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)');});
上面的语句执行后会在 ‘mydb’ 数据库中创建一个名为 LOGS 的表。
插入数据
在执行上面的创建表语句后,我们可以插入一些数据:
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 会映射数组参数中的每个条目给 “?”。
读取数据
以下实例演示了如何读取数据库中已经存在的数据:
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);});
删除记录
删除记录使用的格式如下:
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);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('DELETE FROM LOGS WHERE id=1'); msg = '<p>删除 id 为 1 的记录。</p>'; document.querySelector('#status').innerHTML = msg;});db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); msg = '<p>更新 id 为 2 的记录。</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);});
- HTML5 Web SQL
- [html5]Web SQL
- HTML5 Web SQL
- HTML5 Web SQL
- HTML5 Web SQL 数据库
- HTML5のWeb SQL
- HTML5 Web SQL 数据库
- HTML5 Web SQL 数据库!
- html5 sqlite(Web SQL)
- html5 之web SQL
- HTML5 Web SQL 数据库
- HTML5 Web SQL 数据库
- HTML5 Web SQL
- HTML5 Web SQL Database 数据库
- HTML5 web存储—web SQL
- html5 本地数据库-Web SQL Database
- HTML5开发 Web SQL Database 本地数据库
- HTML5 离线存储之Web SQL
- 《图解HTTP》读书心得(三)
- Java笔记12
- Redis、Zookeeper去服务单点问题实践
- Python使用openpyxl读写excel文件
- Android studio问题集
- HTML5 Web SQL
- 守护进程
- 浅析python 中__name__ = '__main__' 的作用
- 吴恩达深度学习课程deeplearning.ai课程作业:Class 1 Week 4 assignment4_1
- 课题构思模板
- 在 springMVC 中整合表格插件 jqGrid
- 机器学习笔记
- POJ 1456 supermarket(贪心加并查集)
- 协调多个对象之间的交互——中介者模式(一)