关闭

HTML5 内置本地数据库之Sqlite

标签: html5HTML5内置数据库webSqlweb应用数据库
9455人阅读 评论(7) 收藏 举报
分类:

HTML5 内置本地数据库之Sqlite

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

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

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

这里写图片描述

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>

执行结果:

添加一条数据:

这里写图片描述

运行结果:

这里写图片描述

再添两条:

这里写图片描述

关闭浏览器后重新打开:

这里写图片描述

全部清空之后

这里写图片描述

3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:46688次
    • 积分:775
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:3篇
    • 译文:0篇
    • 评论:18条
    最新评论
    Github