数据库这个东东现在也可以用在web上了，目前为止, chrom 6 以上版本，opera 10 以上，safari 5以上支持这个功能.

htm4中数据库只能放在服务器，只能通过服务器来访问，但是在html5中，可以像访问本地文件那样轻松的对内置数据库进行访问。

HMTL5中内置了两种本地数据库，一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite，另一种是是被称为indexedDB 的数据库，我们今天说一下“SQLLite”数据库。

首先介绍几个方法

1.openDatabase() 方法

　　　　openDatabase 方法是用来创建一个访问数据库的对像。如下所示：　　

　var db = openDatabase('mydb',"1.0",'Text db',102400);

　　该方法有四个参数：

  • 数据库名称。
  • 数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
  • 对数据库的描述。
  • 设置分配的数据库的大小（单位是kb）

　　初次调用时创建数据库，以后就是建立连接了。

2. transaction() 方法

　　该方法用来执行事务处理，使用事务处理，可以防止在对数据库进行访问及执行有关操作时受到的外界的干扰。

db.transaction(function(tx,rs){

    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,Log))')

})

transaction 方法使用一个回调函数作为参数，在这个函数中，执行访问数据库的语句。

3.executeSql执行查询

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

这个方法有四个参数

  • 需要执行的SQL语句。
  • SQL语句中所使用到参数的数组（将SQL语句中的所要使用到的参数先用“?” 来代替，然后依次放入数组中）
　例：transaction.executeSql("UPDATE people set ag=? where name=?",[age,name]);
  • SQL执行成功后的回调函数
　function dataHandler(tx,rs){//SQL成功后处理方法}// tx为transaction对像，rs 返回的结果数据集对像;
  • SQL执行后失败的回调

接下来看一下，对成功返回后结果集的一个处理；

结果数据集对像有一个rows属性，其中保存了查询到的每一条记录。条数用rows.length来获取。可以用for循环，用rows[index] 或 rows.Item([index])来获取。一般采用rows[index]的形式。

接下来做一个简单的例子:

HTML:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>本地数据库</title>

</head>

<body onload="init()">

    <h1>使用本地数据库实现web留</h1>

    <table>

        <tr>

            <td>姓名：</td>

            <td><input type="text" id="name"></td>

        </tr>

        <tr>

            <td>留言：</td>

            <td><input type="text" id="memo"></td>

        </tr>

        <tr>

            <td></td>

            <td><input type="button" value="保存"></td>

        </tr>

    </table>

    <table id="datatable" border="1">

    </table>

    <p id="msg"></p>

</body>

</html>

js:

<script>

    var datatable = null;

    var db = openDatabase("MyData","",'test DB',2*1024*1024); //创建数据库

    function init(){

        datatable = document.getElementById("datatable");

        showAllData();//展示

    }

    function removeAllData(){

        for (var i = datatable.childNodes.length-1; i>=0; i--) {

            datatable.removeChild(datatable.childNodes[i]);

        };

        var tr = document.createElement('tr');

        var th1 = document.createElement("th");

        var th2 = document.createElement("th");

        var th3 = document.createElement("th");

        th1.innerHTML = "姓名";

        th2.innerHTML = "留言";

        th3.innerHTML = "时间";

        tr.appendChild(th1)

        tr.appendChild(th2)

        tr.appendChild(th3)

        datatable.appendChild(tr);

    }

    function showData(row){

        var tr = document.createElement('tr');

        var td1 = document.createElement("td");

        var td2 = document.createElement("td");

        var td3 = document.createElement("td");

        td1.innerHTML = row.name;

        td2.innerHTML = row.message;

        var t = new Data();

        t.setTime(row.time);

        td3.innerHTML = t.toLocaleDateString()+" "+t.toLocaleTimeString();

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        datatable.appendChild(tr);

    }

    function showAllData(){

        db.transaction(function(tx){

            tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT , message TEXT,time INTEGER)',[]);

            tx.executeSql('SELECT * FROM MsgData',[],function(tx,rs){

                removeAllData();

                for (var i = 0; i < rs.rows.length; i++) {

                    showData(rs.rows[i]);

                };

            })

        })

    }

    function addData(name,message,time){

        db.transaction(function(tx){

            tx.executeSql('insert into MsgData value(?,?,?)',[name,message,time],function(tx,rs){

                alert("成功保存");

            },function(tx,error){

                alert(error.source+":"+error.message)

            })

        })

    }

    function saveData(){

        var name = document.getElementById('name').value;

        var memo = document.getElementById('memo').value;

        var time = new Date().getTime();

        showAllData();

    }

</script>

HMTL5 本地数据库的更多相关文章

  1. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  2. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  3. Nova PhoneGap框架 第四章 本地数据库

    我一直想把EntityFramework(简称EF)的那一套搬过来,应用于HTML5 SQLite. 幸运的是,我几乎做到了,有些功能无法完成的那是因为SQLite本身不支持.至少从现在已经完成的功能 ...

  4. HTML5本地数据库（SQLite）示例

    本文转载自http://blog.sina.com.cn/s/blog_641cf27f01016pm5.html 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite ...

  5. 创建DOTA2本地数据库(一)

    在APP中,用本地数据库好于频繁的联网去获取相关数据.我使用SQLite作为本地的数据库,比较轻巧. 英雄 首先先建立英雄的数据库,暂时我先只设置ID,name,loaclized_name这三种,我 ...

  6. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  7. 如何利用【DataTable】结合自己本地数据库，使用表格

    如何利用[DataTable]结合自己本地数据库,使用表格我们都知道DataTable的使用与配置,平时我们都是用一个json文件来代替后台,但是实际上我们在与后台交互的时候,后台先取到数据库里面的信 ...

  8. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  9. HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

随机推荐

  1. Linux 学习笔记之 --- select 与 poll 事件模型详解

      select 与 poll 工作原理:   1.select 主要是采用轮询的方式来实现对就绪的 fd 处理: 2.poll 和 select 基本相同,主要不同在于 poll 没有对 fd 数量 ...

  2. Reading RxJava Marble Diagrams

    ------>表示一个Observable(承时间推移,由左入右,左边item先发射) ------>上面的图形,表示这个Observable发射的item ------>上的的|( ...

  3. 分布式基础学习【二】 —— 分布式计算系统（Map/Reduce）

    二. 分布式计算(Map/Reduce) 分布式式计算,同样是一个宽泛的概念,在这里,它狭义的指代,按Google Map/Reduce框架所设计的分布式框架.在Hadoop中,分布式文件系统,很大程 ...

  4. mfs测试

    续1 6. 参考文献: 6.1 文献 http://sery.blog.51cto.com/10037/263515  田逸 http://bbs.chinaunix.net/thread-16438 ...

  5. 【项目运行异常】BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext

    java.lang.IllegalStateException: LifecycleProcessor not initialized - call 'refresh' before invoking ...

  6. 717. 1-bit and 2-bit Characters最后一位数是否为0

    ［抄题］: We have two special characters. The first character can be represented by one bit 0. The secon ...

  7. ./configure 交叉编译库时所最常用到的配置

    ./configure 交叉编译,一般流程 ./configure xxx make make instal 结合我自己的编译工具,一般我的编译选项如下 ./configure --prefix=in ...

  8. cakephp中sql查询in

    $list = $this->Capital->find('all', array('conditions'=>array('remark in '=>array('银联支付' ...

  9. html页面源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. ios7 设置status bar风格

    How to change status bar style during launch on iOS 7 up vote4down votefavorite   When I launch my a ...