好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5中Web Sql的学习小结

本篇 文章 给大家带来的内容是介绍HT ML 5的Web SQL 学习小结,让大家 了解 一些Web Sql的相关知识。 有一定的参考价值 , 有需要的朋友可以参考一下 ,希望对 你们 有所帮助。

在web系统或应用中,经常需要在本地存储一些数据,最早的在客户端存储数据用的是 cookie (当然cookie主要还是用来保存用户的状态, 业余 可以干点保存本地数据的活),事实它 并不适合用于保存客户端的本地数据,有以下几个 原因 :

1、每次请求 服务器 的时候都会增加不必要的流量消耗,因为每次请求服务器是都会讲cookie发送至服务器。

2、cookie的数据存储数据的规则,并不那么好用,结构也不够清晰。

3、最 重要 的 一点 是cookie的存储容量极小,每个cookie的长度不能超过4kb,超过时最早存储cookie的数据会被截掉超出的大小,显然是不太够用的。

随着HTML5的 发展 ,后来又出现了localStorage与sessionStorage:

localStorage :永久存储,无论多久再次进入页面 或者 页面所在站点(可以使用clearI或remove IT em方法删除),都能获取到存储的数据。

sessionStorage :临时存储,当关闭页面的时候会自动清除保存的数据。

事实上在平时工作或开发自己项目的时候,这两个用的是最多,至少目前这两个对象还是可以满足大部分项目本地存储的需求,虽然储存结构依然不够清晰,查询本地存储的数据上依然过于 简单 。

现在主要是总结一下, HTML5中新增的API-->Web Sql本地 数据库 技 术 ,Web Sql数据库API实际上不是HTML5规范的组成部分,它是一个独立的规范,它可以使用与sql语言基本一致的语法 做到 本地数据库的增删改查,所以有 后端 开发经验的 开发者 很容易上手(需要指出的是,HTML5已经 放弃 了Web Sql Databas e数 据库,该规范的指定工作已经停止),即便如此,基本上已经得到了大多数浏览器的支持。现在我们来介绍一下它的使用:

创建一个 websql 数据库:

o PE nDatabase(数据库名,数据库版本号,描述,数据库大小,数据库创建成功的回调);
 VAR  mydb = openDatabase(& # 39 ;m yTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调,可省略
});

注:该方法返回一个数据库访问对象,当创建的数据库已经存在的时候,该 方法直接打开这个数据库。

创建一个事务:

mydb.transaction(function(tx){
    //该方法有一个事务对象参数供使用,该对象上有一 系列 为数据库增删改查的方法。
});

执行一段操作:

tx.executeSql(执行数据库操作的sql语句,参数,数据库操作执行成功的回调,数据库操作执行失败的回调);

具体的数据库操作:

创建一个数据表:

tx.executeSql('create table if not exists table1 (id  unique ,n am e)', [], function(tx, result) { 
	//成功回调
	},function(error){
         //失败回调
	});

注:这条语句的 意思 是创建一个数据表table1,当数据库中不存在这张表的时候,如果语句中不加上"if not exists"的话,当想要创建的数据表在数据库中已经存在的时候会报错。

删除一个数据表:

tx.exexcteSql('drop table table1',[],function(tx,result){
      //删除成功时的回调
      },function(error){ 
         //删除失败时的回调
      });

在数据表中添加一条数据:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            },function(error){
                  //添加数据失败时的回调
            });

删除数据表中的一条或多条数据:

tx.executeSql('delete  From  table1 where id=1',[],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

或:

tx.executeSql('delete f rom  table1 where id=?',[1],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

更新数据库表里面的一条数据:        

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   },function(error){
       //数据 更新失败 时的回调
   });

查询满足查询条件的数据:      

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
},function(error){
  //查询失败时的回调
});

注:查询成功的时候可以通过回调函数中的result参数的rows属性使用查询返回的数据。

这个例子只是最简单的一种查询语句,如果有更多复杂查询的需求的话可以参考sql语句。

总结:

  简单的总结一下,其实这个数据库API是比较简单,所有的增删改查都需要创建一个事务,在事务对象上执行所有操作,目前该API暂时不支持删除整个数据库,但是我们可以通过删除那个数据库里面的所有数据表来清空该数据库,以达到类似效果。

以上就是HTML5中Web Sql的学习小结的详细内容,更多请关注其它相关文章!

总结

以上是 为你收集整理的 HTML5中Web Sql的学习小结 全部内容,希望文章能够帮你解决 HTML5中Web Sql的学习小结 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于HTML5中Web Sql的学习小结的详细内容...

  阅读:20次