HTML5中本地数据库存储及其应用浅析
沉沙 2018-07-16 来源 : 阅读 1243 评论 0

摘要:本篇HTML5教程探讨了HTML5中本地数据库存储及其应用,希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。

本地数据库

1.本地数据库介绍

对于简单的数据,使用sessionStorage和localStorage能够很好地完成存取,但是对于处理复杂的关系型数据, 
它就力不从心了。这也是 HTML 5 的“Web SQLDatabase”API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库.

2.三个核心的方法

①openDatabase·:这个方法使用现有数据库或创建新数据库创建数据库对象 
②transaction:这个方法允许我们根据情况控制事务提交或回滚。 
③executeSql:这个方法用于执行真实的SQL查询。

本地数据库的操作

1. 打开连接并创建数据库

var db = openDatabase("student","1.0","xuesheng",1024*1024,function(){}); 
参数说明: 
A. 数据库名称。 
B. 版本号 目前为1.0。 
C. 对数据库的描述。 
D. 设置数据的大小。 
E. 回调函数(可省略)

2. 创建数据表

db.transaction(function(fx){
   fx.executeSql(
       "create table if not exists stu (id REAL UNIQUE,name TEXT)",
        [],
        function () {
            alert("表创建成功");
        },
        function () {
            alert("表创建失败");
        }
   );
});
executeSql函数有四个参数,其意义分别是: 

1) 表示查询的字符串,使用的SQL语言是SQLite 3.6.19。 
2) 插入到查询中问号所在处的字符串数据。 
3) 成功时执行的回调函数。返回两个参数:tx和执行的结果。 
4) 一个失败时执行的回调函数。返回两个参数:tx和失败的错误信息。

数据表添加数据

db.transaction(function(fx){
 fx.executeSql(
          "insert into stu (id,name) values (?,?),(?,?)",
          [3,"helios",2,"syl"],
          function () {
              alert("数据插入成功");
          },
          function () {
              alert("数据插入失败");
          }
  );
});

数据表查询数据
db.transaction(function(fx){
 fx.executeSql(
       "select * from stu",
        [],
        function (fx,result) {
            var len = result.rows.length;
            for(var i=0;i<len;i++) {
                one.innerHTML+=result.rows.item(i)["name"]+"<br>";
            }
        },
        function () {
            alert("表创建失败");
        }
   );
});

参数说明: 

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

数据表更新数据

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

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

删除表
db.transaction(function(fx) {
   fx.executeSql(
        "drop table stu",
          [],
          function () {
              alert("表删除成功");
          },
          function () {
              alert("表删除失败");
          }
     );
 })

 

本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程