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 ...
随机推荐
- pl/sql Command Window
由于工作需要,最近需要执行sql脚本,之前一直在用执行按钮操作,但最近公司制定了一套标准,其中就有执行sql脚本规范: 以前执行存存储过程: 现在修改存储过程如下: 第一步,打开对应窗口: 第二步,输 ...
- PyInstaller打包成exe可执行文件
PyInstaller 安装pyinstaller 对于那些网络比较稳定,能够流畅使用pip源地址的用户,直接下面的命令就可以搞定: pip install pyinstaller 通常我们会下载源码 ...
- 【知识碎片】 Linuxb 篇
3.登录mysql 开启MySQL服务后,使用MySQL命令可以登录.一般使用mysql -uroot -p即可.如果数据库不是本机,则需要加参数,常用参数如下:1,-h,指定ip地址,默认为loca ...
- 移植OK6410'S dm9000ae…
转载自:http://lagignition.blog.163.com/blog/static/12873002320110443341961/
- opennebula 对接创建模板参数
{ "id": 8, "name": "c5d1390c-1930-45a5-a686-5cef38b319d7", "displ ...
- pip指定安装包版本
pip是目前最好用的python包关系工具,没有之一. 1.版本范围符号:==.>=.<=.>.<. 2.单个安装示例: 1 2 3 pip install cchardet ...
- C# 世界坐标 页面坐标 PageUnit PageScale
PageScale: 获取或设置此 Graphics 的世界单位和页单位之间的比例.PageUnit: 获取或设置用于此 Graphics 中的页坐标的度量单位. 话不多说,上代码: privat ...
- Linux下的多线程下载工具mwget
之前在做项目的时候,遇到一个难题,需要一个多线程下载器,于是阴差阳错的看到了这款工具--mwget,之所以是阴差阳错,是因为mwget的多线程下载功能,并不是我们想要的多线程. wget大家都知道吧, ...
- 牌型总数——第六届蓝桥杯C语言B组(省赛)第七题
原创 牌型种数 小明被劫持到X赌城,被迫与其他3人玩牌.一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张.这时,小明脑子里突然冒出一个问题:如果不考虑花色,只考虑点数,也不考虑自己得 ...
- 原型(Prototype)模式
一. 原型(Prototype)模式 原型模式的用意是:通过给出一个原型对象来指明所要创建的对象类型,然后用复制这个原型对象的办法创建出更多的同类型对象. 从孙大圣的手段谈起 孙悟空在与黄风怪的战斗中 ...