html5本地存储之数据库

最新推荐文章于 2022-11-18 22:13:26 发布

sensus森森

最新推荐文章于 2022-11-18 22:13:26 发布

阅读量516

点赞数

分类专栏： HTML4/HTML5 文章标签：数据库 sql

本文链接：https://blog.csdn.net/qq_27682041/article/details/72779860

版权

HTML4/HTML5 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

对于简单的数据，使用sessionStorage和localStorage
能够很好地完成存取，但是对于处理复杂的关系型数据，
它就力不从心了。这也是 HTML 5 的“Web SQL
Database”API 接口的应用所在。我把它理解成一个

Html5环境下可以用Js执行CRUD的Web数据库

三个核心方法
①openDatabase：这个方法使用现有数据库或创建新数
据库创建数据库对象。
②transaction：这个方法允许我们根据情况控制事务提
交或回滚。

③executeSql：这个方法用于执行真实的SQL查询

表“stu”创建成功，数据插入成功

数据删除成功，表“stu”现在为空表

表“stu”删除成功，student数据库里没有数据表

<!doctype html>

<html>
     <head>
     </head>
     <body>
     <script>
     window.οnlοad=function () {
       var one=document.getElementById("one");

if(window.openDatabase){

// 参数：A.数据库名称。B.版本号目前为1.0。 C. 对数据库的描述。 D. 设置数据的大小。 E. 回调函数(可省略）

executeSql函数有四个参数，其意义分别是：
1 ）表示查询的字符串，使用的SQL语言是SQLite 3.6.19。
2）插入到查询中问号所在处的字符串数据。
3）成功时执行的回调函数。返回两个参数：tx和执行的结果。
4）一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息。

          //插入数据
        fx.executeSql(
          "insert into stu (id ,name) values(?,?)",
          [1,"张三"],
          function () {
          alert("数据插入成功");
          },
          function () {
          alert("数据插入失败");
          }
          );

          //更新数据
          fx.executeSql(
          "update stu set name=? where id=?",
          ["李四",1],
          function () {
          alert("数据更新成功");
          },
          function () {
          alert("数据更新失败");
          }
          );

          //查询数据
          fx.executeSql(
          "select * from stu",
          [],
          function (fx,result) {
          for (var i=0; i<result.rows.length; i++) {
              one.innerHTML+=result.rows.item (i)["name"];
          }
          alert("数据查询成功")
          },
          function () {
          alert("数据查询失败");
          }
          );

参数说明:
result是查询到的结果集，其中最重要的属性—SQLResultSetRowList类型的 rows 是数据集的“行”。
rows 有两个属性：length、 item 。 length代表总条数，用item(num),可访问到具体的行。

          //删除数据
          fx.executeSql(
          "delete from stu where id=?",
          [1],
          function () {
             one.innerHTML="";
             alert("数据删除成功");
          },
          function () {
          alert("删除失败");
          }
          );
          //删除表
      fx.executeSql(
          "drop table stu",
          [],
          function () {
             alert("表删除成功");
          },
          function () {
          alert("表删除失败");
          }
          );
          });

     }
          }
     </script>
     <div id="one">
     </div>
     </body>

</html>

结束语

本文介绍了 HTML5 的 Web SQL Database 特点，对其 API 进行介绍。需要注意的是，如果不是绝对需要，不要使用 Web SQL Database，因为它会让我们的代码更加复杂（匿名内部类的内部函数，回调函数等等）。对大多数情况下，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。通过这些 HTML5 Web SQL Database API 接口，可以获得更多功能，相信以后会出现一些非常优秀的、建立在这些 API 之上的应用程序。