HTML5 内置本地数据库之Sqlite

HTML5 内置本地数据库之Sqlite

一、关于HTML5和web本地数据库

SQLite 可以很好的支持关系型数据库所具备的一些基本特征,如标准SQL语法、事物、数据表和索引等,且占用资源较少,可在移动设备上轻松使用。
HTML5中添加了很多功能,将一些以前必须保存在服务器上的数据转向本地保存,提高了Web应用程序性能的同时还减轻了服务器的负担。然而关于Web SQL Database有一个不太好的消息(来自网络):

我们经常在数据库中处理大量结构化数据,html5引入Web SQL Database概念,它使用 SQL 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的是SQLlite,悲剧正是产生于此,Web SQL Database规范页面有着这样的声明

HTML5 内置本地数据库之Sqlite_第1张图片

This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.

大概意思就是

这个文档曾经在W3C推荐规范上,但规范工作已经停止了。目前已经陷入了一个僵局:目前的所有实现都是基于同一个SQL后端(SQLite),但是我们需要更多的独立实现来完成标准化。

也就是说这是一个废弃的标准了,虽然部分浏览器已经实现

一上来就泼凉水确实不太好 ,但是学习一下总归没有什么坏处的,对吧?
目前我已知的支持Web SQL Database的浏览器有chrome(估计还有别的,只是我没用到~),然而火狐和IE并不支持
W3C目前力推的H5本地数据库是IndexedDB

二、H5 Sqlite数据库三个核心API

opendatabase:使用现有数据库或创建新数据库创建数据库对象

var db = openDatabase('myTel','1.0','test db',1024*100);
//四个参数分别是数据库名 版本 数据库描述 大小
//当该数据库不存在的时候创建并打开数据库,否则直接打开数据库。
//创建的数据库存于本地浏览器的Cache 文件夹。

transaction:事务,可根据情况控制事务提交或回滚

db.transaction(callback)
//用作事务处理,来操作数据库

executeSql:用于执行SQL查询

db.transaction(function(tx){
    tx.executeSql('SQL语句',[参数数组],dataHandler,errorHandler)
})
//executeSql的四个参数:
//1、操作数据库的SQL语句
//2、SQL语句中使用的参数的数组
//3、语句操作成功调用的方法
//4、语句操作失败调用的方法

关于dataHandler和errorHandler:

function dataHandler(transaction,results); // 其中,resultsrows属性中保存了查询到的每一条记录,rows.length属性可以获取记录的条数 // 可使用rows[index]或rows[item]来单独取到某条记录 function errorHandler(transaction,errMsg);

三、一个例子

下面使用一个比较完整的例子来演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sqlite</title>
</head>
<body onload="init()">
    <!-- 创建数据库对象、使用事务进行数据库操作 -->
    姓名:<input type="text" id="name"/>
    电话:<input type="text" id="tel" />
    <input type="button" value="保存" onclick="saveData()" />
    <hr/>
    <input type="button" onclick="showAllData()" value="显示全部">
            <input type="button" onclick="delAllData()" value="清空全部">
    <hr/>
    <table id="datatable" border="1">

    </table>
    <p id="'msg"></p>

</body>
<script type="text/javascript"> var datatable = null; var db = openDatabase('myTel','1.0','test db',1024*100);//数据库名 版本 数据库描述 大小 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'); th1.innerHTML = '姓名'; th2.innerHTML = '电话'; tr.appendChild(th1); tr.appendChild(th2); datatable.appendChild(tr); } function showData(row){//显示数据 var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.name; var td2 = document.createElement('td'); td2.innerHTML = row.tel; tr.appendChild(td1); tr.appendChild(td2); datatable.appendChild(tr); } function showAllData(){//显示所有数据 db.transaction(function (tx){ tx.executeSql('create table if not exists TelData(name TEXT,tel TEXT)',[],function(tx,res){ },function(tx,err){ alert(err.message) }); tx.executeSql('select * from TelData',[],function(tx,result){ removeAllData(); for(var i = 0 ;i<result.rows.length;i++){ showData(result.rows.item(i)); } }) }) } function saveData(){//保存数据 var name = document.getElementById('name').value; var tel = document.getElementById('tel').value; addData(name,tel); showAllData(); } function addData(name,tel){//添加数据 db.transaction(function(tx){ tx.executeSql('insert into TelData values(?,?)',[name,tel],function(tx,rs){ alert('yes'); }, function (tx,err){ alert(err.source +'===='+err.message); }) }) } function delAllData(){//删除所有数据 db.transaction(function(tx){ tx.executeSql('delete from TelData',[],function(tx,res){ alert('删除成功~'); },function (tx,err){ alert('删除失败'+err.message); }) }) showAllData(); } </script>
</html>

执行结果:

添加一条数据:

HTML5 内置本地数据库之Sqlite_第2张图片

运行结果:

HTML5 内置本地数据库之Sqlite_第3张图片

再添两条:

HTML5 内置本地数据库之Sqlite_第4张图片

关闭浏览器后重新打开:

HTML5 内置本地数据库之Sqlite_第5张图片

全部清空之后

HTML5 内置本地数据库之Sqlite_第6张图片

你可能感兴趣的:(数据库,html5,Web应用,websql,HTML5内置数据库)