码前课-前端必修课-HTML5 内置本地数据库之Sqlite

776 05-11

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);
// 其中，results的rows属性中保存了查询到的每一条记录，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