码迷,mamicode.com
首页 > 数据库 > 详细

HTML5 Web SQL 数据库总结

时间:2016-06-29 18:32:57      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

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

  1. openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
  3. executeSql:这个方法用于执行实际的 SQL 查询。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascript</title>
 6     <style type="text/css">
 7 
 8     </style>
 9 </head>
10 <body>
11 <div id="status" name="status">状态信息</div>
12 </body>
13 </html>
14 <script type="text/javascript">
15     /*
16     *openDatabase:使用现有的数据库或者新建的数据库创建一个数据库对象
17     *openDatabase方法对应的五个参数说明:1 数据库名称  2 版本号 3 描述文本 4 数据库大小 5 创建回调(创建回调会在创建数据库后被调用)
18     * */
19     var db = openDatabase(mydb, 1.0, Test DB, 2 * 1024 * 1024);
20     var msg;
21     /*
22     * transaction这个方法让我们能够控制一个事物,以及基于这种情况执行提交或者回滚。
23     * executeSql这个方法用于执行实际的SQL查询。
24     * 语句执行后会在mydb数据库中创建一个名为LOGS的表。
25     * */
26     db.transaction(function (tx) {
27         tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS1 (id unique, log));
28         tx.executeSql(INSERT INTO LOGS1 (id, log) VALUES (1, "nihao1"));//插入数据
29         tx.executeSql(INSERT INTO LOGS1 (id, log) VALUES (2, "nihao2"));//插入数据
30         msg = <p>数据表已创建,且插入了两条数据。</p>;
31         document.querySelector(#status).innerHTML =  msg;
32     });
33 
34     /*
35     * 如何读取数据库中已经存在的数据
36     * */
37     db.transaction(function (tx) {
38         tx.executeSql(SELECT * FROM LOGS1, [], function (tx, results) {
39             var len = results.rows.length, i;
40             msg = "<p>查询记录条数: " + len + "</p>";
41             document.querySelector(#status).innerHTML +=  msg;
42 
43             for (i = 0; i < len; i++){
44                 msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
45                 document.querySelector(#status).innerHTML +=  msg;
46             }
47         }, null);
48     });
49 </script>

 效果截图:

              技术分享

HTML5 Web SQL 数据库总结

标签:

原文地址:http://www.cnblogs.com/liubeimeng/p/5627720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!