HMTL5 本地数据库
数据库这个东东现在也可以用在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 本地数据库的更多相关文章
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5教程之html 5 本地数据库（Web Sql Database）
HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
- Nova PhoneGap框架 第四章 本地数据库
我一直想把EntityFramework(简称EF)的那一套搬过来,应用于HTML5 SQLite. 幸运的是,我几乎做到了,有些功能无法完成的那是因为SQLite本身不支持.至少从现在已经完成的功能 ...
- HTML5本地数据库（SQLite）示例
本文转载自http://blog.sina.com.cn/s/blog_641cf27f01016pm5.html 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite ...
- 创建DOTA2本地数据库(一)
在APP中,用本地数据库好于频繁的联网去获取相关数据.我使用SQLite作为本地的数据库,比较轻巧. 英雄 首先先建立英雄的数据库,暂时我先只设置ID,name,loaclized_name这三种,我 ...
- 如何结合自己本地数据库，使用【百度地图】API
如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...
- 如何利用【DataTable】结合自己本地数据库，使用表格
如何利用[DataTable]结合自己本地数据库,使用表格我们都知道DataTable的使用与配置,平时我们都是用一个json文件来代替后台,但是实际上我们在与后台交互的时候,后台先取到数据库里面的信 ...
- 【HTML5】HTML5本地数据库（Web Sql Database）
Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
- HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）
各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...
随机推荐
- 如何用CURL将文件下载到本地指定文件夹
若直接调用下载文件的url有重定向,则需先调用第一个方法,获取到跳转后的url,才可直接下载.否则需要手动点击浏览器的下载确定按钮. 调用示例: $imgpath = "http://www ...
- dom方式解析xml文件的步骤
使用java类即可
- 一个由有符号下标引起的bug
先看段代码: if(s[d[i]]) { ... } 这里的d是一个char*的内存buffer,s是一个256长度的bool数组.上段代码逻辑是,s已进行过初始化,其作用是过滤字节,有些字节对应tr ...
- VMware设置及linux静态ip设置
1. VMWARE虚拟机NAT模式上网设置 1.1. VM虚拟机设置 1.1.1. 虚拟机全局设置 启动虚拟机选择[虚拟网络编辑器] 如果需要管理员权限点[更改设置],没有提示这忽略这一步 选 ...
- string基本字符系列容器（一）
C++STL提供了string基本字符系列容器来处理字符串,可以把string理解成字符串类,它提供了添加,删除,替换,查找和比较等丰富的方法. 使用string容器,需要头文件包含声明#includ ...
- 使用Python定时执行一任务，自动登录某web系统，生成报表，然后发送邮件给指定人员
一.项目需求 每周从A系统生成一张Excel报表,发送此报表给指定人员,相关人员依据此报表去完成后续的工作. 项目限制: 1.无法通过EDI系统交互的方式从后台读取数据 2.由于公司网络环境限制,不能 ...
- 3.Dynamic Layout 动态布局。在槽中处理布局
在应用程序中,一个界面的布局基本都是固定的. 在这个实例中,我们把管理布局的代码放在槽中.这样点击一次按钮,触发槽.布局改变一次.这样就成为一个动态布局. (一) 水平和竖直布局改变 横向: 纵向: ...
- 数据库 MySQL 之 表操作、存储引擎
数据库 MySQL 之 表操作.存储引擎 浏览目录 创建(复制) 删除 修改 查询 存储引擎介绍 一.创建(复制) 1.语法: 1 2 3 4 5 CREATE TABLE 表名( 字段名1 ...
- FreeMarker 的空值处理 ， 简单理解 ， 不用TMD就会忘记
NO.1 而对于FreeMarker来说,null值和不存在的变量是完全一样的 NO.2 ! 指定缺失变量的默认值 返回String NO.3 ?? 判断变量是否存在 返回boolean NO.4 $ ...
- 原生ajax访问服务器所展现的现象
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax ...