HTML5 Web SQL

Web Sql Database,中文翻译作“本地数据库”,是随着HTML5规范加入的在浏览器端运行的轻量级数据库。

在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的负担,使Web时代重新回到了“客户端为重,服务器为轻”的时代。

在这其中,一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中,数据库只能放在服务器端,只能通过服务器来访问数据库,但是在HTML5中,可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在,像这种不需要存储在服务器上的,被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用,所以HTML5中也采用了这种数据库来作为本地数据库。

Html5数据库它包含三个核心方法:
1.openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象

2.transaction:这个方法允许我们根据情况控制事务提交或回滚

3.executeSql:这个方法用于执行SQL 的操作

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

1、打开数据库或者创建数据库

//创建数据库 -有该数据库就打开,没有则是新建
    var database=openDatabase(‘emp‘,‘1.0‘,‘员工资料管理‘,1024*1024,function(){});
  if(!database){//通过databse 判断是否创建或则打开成功
    alert(‘创建/打开失败‘)
  }else{
    alert(‘创建/打开成功‘)
  }openDatabasek中五个参数分别为:数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。

2、创建表

function creater_sql(){
        // - 创建表
        database.transaction(function(fx){
            fx.executeSql(
                "create table if not exists stu(s_name TEXT,s_score INT,s_golds INT)",
                [],
                function(fx,result){alert(‘创建成功‘)},//返回状态 --成功
                function(fx,error){alert(‘创建失败‘)}//返回状态 --失败
            )
        });
    }

3、插入数据

function insert(){
        // - 插入数据
        database.transaction(function(fx){
            fx.executeSql("insert into stu(s_name,s_score,s_golds) values(?,?,?)",
                [name,sec1,s_gold],
    //            [‘李四‘,1000,1],
                function(){alert(‘执行成功‘)},//返回状态 --成功
                function(fx,e){alert(‘失败‘);alert(e)})//返回状态 --失败
        });
    }

4、查询数据

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

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

 

5、删除

    //删除数据表
    dataBase.transaction(function (fx) {
        fx.executeSql(‘drop  table  stu‘);
    });
    //删除数据库
    dataBase.transaction(function (fx) {
        fx.executeSql(‘drop  database stu‘);
    });
时间: 2024-12-26 00:50:33

HTML5 Web SQL的相关文章

HTML5移动开发之路(20)——HTML5 Web SQL Database

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(20)--HTML5 Web SQL Database 一.Web Database介绍 WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持WebSQL Database WebSQL数据库有三个核心方法: 1)打开数据库openDatabase()方法: 此方法创建数

HTML5 Web SQL 数据库

HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作. 你也可以参考我们的 SQL 教程,了解更多数据库操作知识. Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作. 核心方法 以下是规范中定义的三个核心方法: openDatabase:这个方法使用现有的数

HTML5 Web SQL 数据库操作

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 以下是规范中定义的三个核心方法: openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象. transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚. executeSql:这个方法用于执行实际的 SQL 查询. openDatabase() 方法对应的五个参数说明: ①数据库名称    

HTML5 Web SQL 数据库总结

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作. Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作. 核心方法 以下是规范中定义的三个核心方法: openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象. transaction:这个方法让我们能够控制一个事务

前端存储之Web Sql Database

前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适合我们的项目,原因文章后面会讲到,所以我们就继续找,于是我们就找到了Web Sql Database,发现这个前端数据库是比较适合我们的项目的,于是果断转投Web Sql Database的怀抱,找存储工具跟穿鞋一个道理,不在乎多炫酷,合适才是王道,要是因为不合适导致磨脚是走不长远的,既然找到了合适

web离线应用 Web SQL Database

web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite 主要核心api有3个 openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned

HTML5 离线存储之Web SQL

HTML5 在离线存储之Web SQL 本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)  1,打开数据库 2,创建表 3,新增数据 4,更新数据 5,读取数据 6,删除数据 事实上,关键点在于如何拿到一个可执行SQL语句的上下文, 像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似"SqlHelper&q

基于html5 localStorage , web SQL, websocket的简单聊天程序

new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var sendMessage; var connectButton; var disconnectButton; var sendButton; var open = function() { var url = serverUrl.val(); ws = new WebSocket(url); ws.onope

html5 初试 Web SQL Database

Web SQL Database API不包含在html5规范中,它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API.所有现代浏览器都支持此API.它使用的SQL是SQLite . html5 中使用 Local and session storage 本地存储非常的方便,键值对方式虽说是使用方便,但对一些大量的数据结构处理就力有不及了,而Web SQL Database正适合这种类型的数据存储. Web SQL Database 是异步的. 连接/创建Database: