HTML5web存储-webSQL示例代码分析

来源：动视网责编：小采时间：2020-11-27 15:11:31

HTML5web存储-webSQL示例代码分析

HTML5web存储-webSQL示例代码分析:什么是web SQL我们经常在应用程序中大量处理结构化数据，HTML5引入了web SQL database概念，它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中，而是一个单独的规范，Safari、Chrome、Oprea浏

推荐度：

点击下载本文 文档为doc格式

导读HTML5web存储-webSQL示例代码分析:什么是web SQL我们经常在应用程序中大量处理结构化数据，HTML5引入了web SQL database概念，它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中，而是一个单独的规范，Safari、Chrome、Oprea浏

什么是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('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
 context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
 context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
 context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
 });

这个例子中我们创建一个表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>

运行结果如下：