当前位置:Gxlcms > html代码 > HTML5web存储-webSQL示例代码分析

HTML5web存储-webSQL示例代码分析

时间:2021-07-01 10:21:17 帮助过:16人阅读


什么是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方法用以处理事务,当一条语句执行失败的时候,整个事务回滚。方法有三个参数:包含事务内容的一个方法、执行成功回调函数(可选)、执行失败回调函数(可选)。

  1. db.transaction(function (context) {
  2. context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
  3. context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
  4. context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
  5. context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
  6. });

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

executeSql

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

示例

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>web SQL demo</title>
  6. <script src="jquery-3.0.0.min.js"></script>
  7. <script>
  8. //创建或连接数据库
  9. function getDb()
  10. {
  11. var db = openDatabase("data.db","1.0","demo",1024*1024);
  12. return db;
  13. }
  14. //初始化数据库
  15. function initDb()
  16. {
  17. var db = getDb();
  18. if(db == null)
  19. {
  20. alert("你的浏览器不支持web SQL");
  21. return null;
  22. }
  23. db.transaction(function(trans){
  24. trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
  25. function(trans,error){alert(error)})
  26. });
  27. }
  28. $(function(){
  29. var db = getDb();
  30. initDb();
  31. $("#btnSave").click(function(){
  32. var name = $("#name").val();
  33. var title = $("#title").val();
  34. var content = $("#content").val();
  35. //执行sql脚本来插入数据
  36. db.transaction(function(trans){
  37. trans.executeSql("insert into demo(name,title,content)values(?,?,?)",
  38. [name,title,content],
  39. function(trans,success){},
  40. function(trans,error){alert(error);}
  41. );
  42. showAll();
  43. });
  44. });
  45. })
  46. //显示所有数据
  47. function showAll()
  48. {
  49. $("#tblData").empty();
  50. var db = getDb();
  51. db.transaction(function(trans){
  52. trans.executeSql("select * from demo",[],function(trans,data){
  53. //获取查询到的数据
  54. if(data)
  55. {
  56. for(var i=0;i<data.rows.length;i++)
  57. {
  58. //获取一行json数据,将数据拼接成表格
  59. appendDataToTable(data.rows.item(i));
  60. }
  61. }
  62. },function(trans,error){alert(error);});
  63. });
  64. }
  65. function appendDataToTable(data)
  66. {
  67. var name = data.name;
  68. var title = data.title;
  69. var content = data.content;
  70. var strHtml = "";
  71. strHtml += "<tr>";
  72. strHtml += "<td>"+name+"</td>";
  73. strHtml += "<td>"+title+"</td>";
  74. strHtml += "<td>"+content+"</td>";
  75. strHtml += "</tr>";
  76. $("#tblData").append(strHtml);
  77. }
  78. </script>
  79. </head>
  80. <body>
  81. <table>
  82. <tr>
  83. <td>用户名:</td>
  84. <td><input type="text" name="name" id="name" required/></td>
  85. </tr>
  86. <tr>
  87. <td>标题</td>
  88. <td><input type="text" name="title" id="title" required/></td>
  89. </tr>
  90. <tr>
  91. <td>留言</td>
  92. <td><input type="text" name="content" id="content" required/></td>
  93. </tr>
  94. </table>
  95. <input type="button" value="保存" id="btnSave"/>
  96. <br/>
  97. <input type="button" value="展示所有数据" onclick="showAll();"/>
  98. <table id="tblData"></table>
  99. </body>
  100. </html>

运行结果如下:
这里写图片描述

以上就是HTML5 web存储-web SQL示例代码分析的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行