HTML5 web存储-web SQL示例代码分析

百变鹏仔 2个月前 (10-18) #H5教程

文章标签示例

什么是web SQL?

我们经常在应用程序中大量处理结构化数据，html5引入了web sql database概念，它允许应用程序通过异步的javascript接口来访问sqllite数据库。但目前web sql并不在html5的规范中，而是一个单独的规范，safari、chrome、oprea浏览器支持web sql。

三个核心方法

Web SQL Database 规范中定义的三个核心方法：

openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行SQL 查询
立即学习“前端免费学习笔记（深入）”；

openDatabase

语法：var db = openDatabase(name,version,displayName,estimatedSize,creationCallback);
name:数据库名字
version:数据库版本号
displayName:数据库描述
estimatedSize:数据库保存数据大小，以字节为单位
creationCallback:回调函数，非必须

transaction

transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数：包含事务内容的一个方法、执行成功回调函数(可选)、执行失败回调函数(可选)。

db.transaction(function (context) {           context.executeSql(&#39;CREATE TABLE IF NOT EXISTS testTable (id unique, name)&#39;);           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (0, "Byron")&#39;);           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (1, "Casper")&#39;);           context.executeSql(&#39;INSERT INTO testTable (id, name) VALUES (2, "Frank")&#39;);         });

这个例子中我们创建一个表testTable，并在表中插入三条数据，四条执行语句任何一条出错，整个事务都会回滚。

executeSql

executeSql方法用以执行SQL语句，返回结果，方法有四个参数：
- 查询字符串
- 用以替换查询字符串中问号的参数
- 执行成功回调函数（可选）
- 执行失败回调函数（可选）
语法：
trans.executeSql(sql,[],function(){trans,data},function(trans,msg){});

示例

<!doctype html><html><head>    <meta charset="utf-8">    <title>web SQL demo</title>    <script src="jquery-3.0.0.min.js"></script>    <script>        //创建或连接数据库        function getDb()        {            var db = openDatabase("data.db","1.0","demo",1024*1024);            return db;        }        //初始化数据库        function initDb()        {            var db = getDb();            if(db == null)            {                alert("你的浏览器不支持web SQL");                return null;            }            db.transaction(function(trans){                trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},                function(trans,error){alert(error)})            });        }        $(function(){                var db = getDb();                initDb();                $("#btnSave").click(function(){                    var name = $("#name").val();                    var title = $("#title").val();                    var content = $("#content").val();                    //执行sql脚本来插入数据                    db.transaction(function(trans){                        trans.executeSql("insert into demo(name,title,content)values(?,?,?)",                                        [name,title,content],                                        function(trans,success){},                                        function(trans,error){alert(error);}                                        );                    showAll();                    });                });                         })        //显示所有数据        function showAll()        {            $("#tblData").empty();            var db = getDb();            db.transaction(function(trans){                trans.executeSql("select * from demo",[],function(trans,data){                    //获取查询到的数据                    if(data)                    {                        for(var i=0;i<data.rows.length;i++)                        {                            //获取一行json数据，将数据拼接成表格                            appendDataToTable(data.rows.item(i));                        }                    }                },function(trans,error){alert(error);});            });        }        function appendDataToTable(data)        {            var name = data.name;            var title = data.title;            var content = data.content;            var strHtml = "";            strHtml += "<tr>";            strHtml += "<td>"+name+"</td>";            strHtml += "<td>"+title+"</td>";            strHtml += "<td>"+content+"</td>";            strHtml += "</tr>";            $("#tblData").append(strHtml);        }    </script></head><body>    <table>        <tr>            <td>用户名：</td>            <td><input type="text" name="name" id="name" required/></td>        </tr>        <tr>            <td>标题</td>            <td><input type="text" name="title" id="title" required/></td>        </tr>        <tr>            <td>留言</td>            <td><input type="text" name="content" id="content" required/></td>        </tr>    </table>    <input type="button" value="保存" id="btnSave"/>    <br/>    <input type="button" value="展示所有数据" onclick="showAll();"/>    <table id="tblData"></table></body></html>

运行结果如下：

文章推荐

HTML5 web存储-web SQL示例代码分析

什么是web SQL?

三个核心方法

openDatabase

transaction

executeSql

示例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集