数据库这个东东现在也可以用在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. Python基础学习五 内置模块

    time 模块 1 >>> import time 2 >>> time.time() 3 1491064723.808669 4 >>> # t ...

  2. SQL语句 表字段的操作 添加，删除，修改表的字段

    alter table 表名 drop constraint 约束名字   //删除字段的原有约束 alter table 表名 add constraint 约束名字 DEFAULT 默认值 for ...

  3. zend studio在线安装svn的插件

    这个,其实真的很简单 ,但是让我纠结了很久. 安装步骤: 1.确保电脑能够上网: 2.打开zend studio,然后选择help->welcome会弹出一个欢迎页面; 3.等待几秒后可以看到右 ...

  4. SpringMVC 课程第一天

    SpringMVC第一天   框架课程 1. 课程计划 第一天 1.SpringMVC介绍 2.入门程序 3.SpringMVC架构讲解 a) 框架结构 b) 组件说明 4.SpringMVC整合My ...

  5. Solidity开发、测试、部署

    这篇文章很详细的列举了几种方式来开始solidity开发: https://medium.com/@davekaj/solidity-tips-and-tricks-for-beginners-bui ...

  6. dataframe 用法总结

    http://pda.readthedocs.io/en/latest/chp5.html data = [] 列表初始化 data = (,) data = {} 字典初始化 data = pd.D ...

  7. Part3_lesson4---协处理器访问指令

    1.什么是协处理器? CP15是协处理器, CP15的作用:系统控制协处理器CP15,它提供了额外的寄存器,这些寄存器用于配置和控制cache,MMU,保护系统,时钟模式,和其他的系统项,比如大小端操 ...

  8. 函数有一个特殊的属性 prototype！

    JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...

  9. 2.3.1 java 内存模型

    在前面谈到了一些关于内存模型以及并发编程中可能会出现的一些问题.下面我们来看一下Java内存模型,研究一下Java内存模型为我们提供了哪些保证以及在java中提供了哪些方法和机制来让我们在进行多线程编 ...

  10. up6-chrome 45+安装教程

    up6-Chrome 45+安装说明 说明:只需要安装up6.exe即可,up6.exe为插件集成安装包. 1.以管理员身份运行up6.exe.up6.exe中已经集成Chrome 45插件.