打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML5 内置本地数据库之Sqlite

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 文件夹。
  • 1
  • 2
  • 3
  • 4

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

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

executeSql:用于执行SQL查询

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

关于dataHandler和errorHandler:

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

三、一个例子

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

html lang='en'>head> meta charset='UTF-8'> title>Sqlitetitle>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 ;ifunction 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98

执行结果:

添加一条数据:

运行结果:

再添两条:

关闭浏览器后重新打开:

全部清空之后

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HTML5本地存储之Database Storage应用介绍
前端|HTML5也能操作数据库
PhoneGap的脱机数据库 +
HTML5项目笔记5:使用HTML5 WebDataBase设计离线数据库
html5之websql深入理解
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服