时间:2021-07-01 10:21:17 帮助过:16人阅读
我们经常在应用程序中大量处理结构化数据,HTML5引入了web SQL database概念,它允许应用程序通过异步的Javascript接口来访问SQLlite数据库。但目前web SQL并不在HTML5的规范中,而是一个单独的规范,Safari、Chrome、Oprea浏览器支持web SQL。
Web SQL Database 规范中定义的三个核心方法:
openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
transaction:这个方法允许我们根据情况控制事务提交或回滚
executeSql:这个方法用于执行SQL 查询
语法:var db = openDatabase(name,version,displayName,estimatedSize,creationCallback);
name:数据库名字
version:数据库版本号
displayName:数据库描述
estimatedSize:数据库保存数据大小,以字节为单位
creationCallback:回调函数,非必须
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方法用以执行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示例代码分析的详细内容,更多请关注Gxl网其它相关文章!