数据库这个东东现在也可以用在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. Catch That Cow（bfs)

    Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...

  2. java之多态性

    多态性(Polymorphism):一个东西,在不同的情况下,呈现出不同的行为两类:静态多态性:函数重载void add(int a,int b){}void add(int a,int b,int ...

  3. Oracle-11g 中当执行 DBMS_STATS 时，因数据泵外部表文件缺失 Alert Log 告警 "ORA-20011、ORA-29913" 以及 "KUP-XXXXX"错误

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  4. 【bzoj2186】[Sdoi2008]沙拉公主的困惑

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 3303  Solved: 1129[Submit][S ...

  5. jquery on事件在IE8下失效的一种情况，及解决方法/bootstrap空间绑定控件事件不好用

    同事在复制bootstrap中的select控件之后,发现用$('.selectpicker').selectpicker();刷新下拉框控件不好使,后来发现是用原生js克隆的方法obj.cloneN ...

  6. ADO.NET连接池

    池:理解为一堆集合,一堆数组,一堆对象ado.net连接池,连接字符串注明Pooling=false关闭连接池 web应用是肯定要启动连接池的,因为默认启动,可以不用管,知道这么一回事就OK了当启动连 ...

  7. unity3d 为什么要烘焙？烘焙作用是为了什么？

    可以这样理解.你把物体模型放进了场景里之后, 引擎会计算光线,光线照到你的物体的表面形成反光和阴影. 如果不烘焙, 游戏运行的时候,这些反光和阴影都是由显卡和CPU计算出来的.你烘焙之后,这些反光和阴 ...

  8. sqlserver临时表或表变量代替游标

    在很多场合,用临时表或表变量也可以替代游标 临时表用在表没有标识列(int)的情况下. 在表有标识列(int)的情况下可以用表变量,当然也可以用临时表. 利用临时表或表变量的原因时,生成一个连续的列 ...

  9. Linux设置串口波特率等参数

    转自 http://blog.csdn.net/zoomdy/article/details/50921336 mingdu.zheng at gmail dot com stty查看串口参数 stt ...

  10. MySQL事务隔离级别测试实例

    https://www.cnblogs.com/huanongying/p/7021555.html MySQL事务隔离级别 事务隔离级别 脏读 不可重复读 幻读 读未提交(read-uncommit ...