HTML5 内置本地数据库之Sqlite

原创 2015年11月20日 21:13:34

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>

执行结果:

添加一条数据:

这里写图片描述

运行结果:

这里写图片描述

再添两条:

这里写图片描述

关闭浏览器后重新打开:

这里写图片描述

全部清空之后

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

html5-localStorage本地存储和SQLLite本地数据库

localstorage和cookiecookie缺点:① cookie大小限制在4k左右,不适合存业务数据② cookie每次随HTTP事务一起发送,浪费带宽localstorage优势:① loc...

Html5访问本地数据库sqlite

原地址: http://blog.csdn.net/hbcui1984/article/details/8471063 在上一篇《HTML5本地存储之Web Storage篇》中,...
  • szyyyp
  • szyyyp
  • 2015年04月16日 18:07
  • 1540

h5中本地数据库简介

HTML5创建本地数据库

此API基于W3C WEB SQL Database Specification和W3C Web Storage API Specification。有些设备已经提供了对该规范的实现,对于这些设备...

HTML5中本地数据库(SQLLite)的基础

在html5中,可以像访问本地文件那样轻松的对内置数据库进行直接访问。 html5中内置了两种数据库,一种为SQLLite,另一种为indexedDB。在js中使用SQLLite数据库的步骤:1.创...

第66章、使用SQLite本地数据库(从零开始学Android)

在Android平台上,集成了一个嵌入式关系型数据库—SQLite。以SQLite是一款轻型数据库:SQLite3支持 NULL、INTEGER、REAL(浮点数字)、TEXT(字符串文本)和BLOB...

Android本地数据存储之SQLite

Android给我们提供了一个轻量级数据库SQLite。 SQLite是一个轻量级关系型数据库, Android内置的是SQLite3版本 SQLite支持五种数据类型:NULL,INTEGER,...
  • wu_wxc
  • wu_wxc
  • 2015年10月29日 09:43
  • 5763

H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)

H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL。不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多,...

Html5本地存储和本地数据库

Html5本地存储和本地数据库一、本地存储由来的背景众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Co...

HTML5中本地存储与本地数据库

一、本地存储由来的背景       众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 内置本地数据库之Sqlite
举报原因:
原因补充:

(最多只允许输入30个字)