html5本地存储之数据库

我就是我 2022-06-15 07:36 246阅读 0赞

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

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

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

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

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

![Center][]

![Center 1][]

![Center 2][]

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

![Center 3][]

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

![Center 4][]

<!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 之上的应用程序。

[Center]: /images/20220615/675e3365c9454c6dbd7a0d07ffa9b6b9.png
[Center 1]: /images/20220615/676976a440c64b3c89617d736792c936.png
[Center 2]: /images/20220615/a546e1e8b98d41659f7634c7fc70431b.png
[Center 3]: /images/20220615/7db66f9dde434fdb97264e8af09b8d00.png
[Center 4]: /images/20220615/631b4fac450448f4bea28a06b21d45e9.png