[前端] webSQL
2015-06-17 13:56
183 查看
HTML5 Web SQL
Html5数据库API是以一个独立规范形式出现,它包含三个核心方法:1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询。
打开数据库
openDatabase方法可以打开已经存在的数据库,不存在则创建:
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五个参数分别为:数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。
执行查询
database.transaction()函数用来查询,下面将在mydatabase数据库中创建表t1:
var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)'); });
插入操作
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)'); tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")'); });
在插入新记录时,我们还可以传递动态值,如:
var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)'); tx.executeSql('INSERT INTO t1 (id,log) VALUES (?, ?'), [e_id, e_log]; //e_id和e_log是外部变量 });
读操作
如果要读取已经存在的记录,我们使用一个回调捕获结果,代码如下:
var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)'); tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM t1, [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Found rows: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });
完整的例子
<!DOCTYPE HTML> <html> <head> <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, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); msg = '<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div> </body> </html>
谢谢关注!
相关文章推荐
- Javascript模块化编程(三):require.js的用法
- nodeJS 利用xlsx导出插件导出excel文件 (可以设置excel单元格颜色/宽度)
- Javascript模块化编程(二):AMD规范
- Javascript模块化编程(一):模块的写法
- 初次认识:Transfer-Encoding: chunked
- js请求的几种方式
- 基于9款CSS3鼠标悬停相册预览特效
- 圆形切换按钮
- Selenium2学习-011-WebUI自动化实战实例-009-JavaScript 在 Selenium 自动化中的应用实例之一(赋值)
- js代码实现的简单的天数倒计时
- CSS媒体查询
- AngularJS踩坑(2)
- DaoCloud体验-使用node构建应用程序
- html css 响应式布局
- javascript:window.location.replace 与 window.location.reload() 刷新页面的不同效果
- JS面向对象编程之对象
- JQuery模板
- JQuery模板
- JQuery模板
- JQuery模板