数据库这个东东现在也可以用在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. UNIX 网络编程学习

    a.述 书买很久了,好好学习下.O(∩_∩)O  只写程序,原理什么的,先不写了. b.环境 deepin15.4.1 64位 vs code gcc version 6.4.0 20170724 ( ...

  2. oracle使用exp/imp导入导出（用户）

    实例,从远程机器上导出nxgy用户的所有对象和数据,然后导入到本机数据库的nxgy用户里(用户名可自定义) 如果本机nxgy用户已经存在(数据没用,可以删除),级联删除用户所有对象 首先,从远程机器上 ...

  3. 【微信公众平台开发】微信JS-SDK开发，信公众平台js-sdk

    根据微信开发文档步骤如下: 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. JS接口安全域名设置 mi.com(前面不用带www/http,域名必须备案过)   2 ...

  4. if else的执行流程

    int main(void) { int a, b; char op; float ans; scanf_s("%d%c%d",&a,&op,1,&b); ...

  5. 1.SQL

    Qt和数据库之间的操作非常广泛,Qt支持各种开源和商业的数据库. SQL支持和集成了Qt Model/View结构,让你在GUI编程中更加灵活和方便的使用数据库.

  6. 关于Tomcat中封装请求-响应的结构的分析

    在编写Servlet时,往往只重写了doGet和doPost方法,使用Tomcat通过(HttpServletRequest 和 HttpServletResponse)接口传递来的request和r ...

  7. WCF项目问题2-无法激活服务，因为它需要 ASP.NET 兼容性。没有未此应用程序启用 ASP.NET 兼容性。请在 web.config 中启用 ASP.NET 兼容性，或将 AspNetCompatibilityRequirementsAttribute.AspNetCompatibilityRequirementsMode 属性设置为 Required 以外的值。

    无法激活服务,因为它需要 ASP.NET 兼容性.没有未此应用程序启用 ASP.NET 兼容性.请在 web.config 中启用 ASP.NET 兼容性,或将 AspNetCompatibility ...

  8. redis内存优化方法

    先来认识2个redis配置参数 hash-max-ziplist-entries : hash内部编码压缩列表的最大值,默认512 hash-max-zipmap-value : hash内部编码压缩 ...

  9. Selenium家谱

    自动化测试一词也算是整个测试行业里面比较热门的一个词儿,工资高,前景好,有实力,有态度等等,很多企业的管理者也在不断的扩大自己的队伍和职能,这也是导致自动化测试比较流行的原因之一.但是很多企业做自动化 ...

  10. APUE（3）---文件I/O (2)

    七.函数write #include <unistd.h> size_t write(int fd, const void *buf, size_t nbytes); //若成功,返回已写 ...