`
lucifinilhades
  • 浏览: 86602 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 本地数据库

阅读更多

本地数据库的基本概念

在HTML5中,添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地,从而提高了Web应用程序的性能,减轻了服务器端的负担。在这其中,一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。

现在,这种不需要存储在服务器上的,被称为“SQLLite”的文件型SQL数据库已经得到了广泛的利用,所以HTML5中也采用了这种数据库来作为本地数据库,要使用SQLLite数据库,编写JavaScript脚本的步骤包括:

  1. 创建访问数据库的对象;
  2. 使用事务处理。

首先,必须使用openDatabase()方法来创建一个访问数据库的对象,该方法的使用方法所下所示:

var db = openDatabase(dbName, verNo., desc, size);

该方法使用四个参数,第一个参数为数据库名,第二个参数为版本号,第三个参数为数据库的描述,第四个参数为数据库的大小。该方法返回创建后的数据库的访问对象,如果该数据库不存在,则创建该数据库。

实际访问数据库的时候,还需要调用transaction()方法,用来执行事务处理。使用事务处理,可以防止在对数据库进行访问及执行有关操作的时候受到外界打扰。因为在Web上,同时会有许多用户都在对页面进行访问。如果在访问数据库的过程中,正在操作的数据被别的用户给修改的话,会引起很多意想不到的后果。因此,可以使用事务来达到在操作完了之前,阻止别的用户访问数据库的目的。

transaction()方法的使用方法如下:

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, Log)');
});

该方法使用一个回调函数为参数。在这个函数中,执行访问数据库的语句。

用executeSql来执行查询

executeSql()方法的完整定义如下:

transaction.executeSql(sqlquery, [], dataHandler, errorHandler);

该方法使用四个参数,第一个参数为需要执行的SQL语句;第二个参数为SQL语句中所有使用到的参数的数组。在executeSql()方法中,将SQL语句中所要使用到的参数先用“?”代替, 然后依次将这些参数组成数组放在第二个参数中,例如:

transaction.executeSql('UPDATE people SET age=? WHERE name=?;', [age, name]);

第三个参数为执行SQL语句成功时调用的回调函数。该回调函数的传递方法如下所示:

function dataHandler(transaction, results) {
    // 执行SQL语句成功时的处理。
}

该回调函数使用两个参数,第一个参数为transaction对象,第二个参数为执行查询操作时返回的查询到的结果数据集对象。

第四个参数为执行SQL语句出错时调用的回调函数。该回调函数的传递方法如下所示:

function errorHandler(transaction, errmsg) {
    // 执行SQL语句出错时的处理。
}

该回调函数使用两个参数,第一个参数为transaction对象,第二个参数为执行SQL语句发生错误时的错误信息文字。

结果数据集对象有一个rows属性,其中保存了查询到的每条记录,记录的条数可以用rows.length来获取。可以用for循环,用rows[index]或rows.Item([index])的形式来依次取出每条数据。在JavaScript脚本中,一般采用rows[index]的形式。

分享到:
评论
1 楼 liang3307 2012-03-15  
好,我们也在使用html5,其中为了离线可以完全访问,把服务端数据存放到sqlite中。但是这种回调的写法,没法对批次数据进行事务控制,不知道作者有什么好的方法?

相关推荐

    HTML5 本地数据库操作

    HTML5是Web开发领域的一次重大革新,其中一个重要特性就是引入了本地数据库存储技术,使得开发者可以实现离线应用的功能。这一特性极大地提升了用户体验,尤其是在网络环境不稳定或无网络的情况下,用户仍然能够访问...

    利用html5本地数据库,实现自定义背景图片。

    在本案例中,“利用html5本地数据库,实现自定义背景图片”这一主题,将深入探讨如何利用HTML5的Web SQL(SQLite)数据库来存储用户选择的背景图片,以实现个性化的网页背景设置。 首先,我们需要了解HTML5的Web ...

    HTML5-本地数据库.rar

    HTML5是现代网页开发的重要标准,它引入了许多新特性,其中本地数据库功能是提升Web应用程序离线可用性和数据存储能力的关键。这个“HTML5-本地数据库.rar”压缩包可能包含了关于如何利用HTML5的离线存储机制来创建...

    HTML5本地数据库基础操作详解

    HTML5本地数据库是一种在用户浏览器中存储数据的机制,它允许网页应用在离线状态下也能访问数据,极大地提升了用户体验。这种技术主要通过Web SQL Database API实现,虽然在最新的Web标准中已被Web Storage(包括...

    html5本地数据库教程(indexed)

    HTML5的IndexedDB是一个强大的本地数据存储解决方案,尤其适合需要大量结构化数据的Web应用程序。这个API遵循W3C的标准,允许开发者在客户端存储大容量数据,并通过索引实现高效检索。与DOM Storage相比,IndexedDB...

    HTML5通讯录用本地数据库制作联系人

    用HTML5本地数据库制作联系人,使用Chrome或Opera才能看到效果

    12.本地数据库.docx

    ### HTML5本地数据库知识点解析 #### 一、HTML5 Web Storage与Web SQL Database对比 HTML5为客户端存储提供了两种方式:Web Storage 和 Web SQL Database。其中Web Storage 包括了 LocalStorage 和 SessionStorage...

    html5使用本地sqlite数据库

    HTML5的离线存储功能是通过一种叫做Web Storage的技术实现的,其中SQLite数据库是其中的一部分,主要用于在用户浏览器中存储大量结构化数据。这个技术在移动应用开发中尤其有用,尤其是当应用程序需要在离线状态下...

    HTML5 JS API教程 本地数据库

    HTML5 JS API 教程——本地数据库 在现代网页开发中,HTML5的引入为开发者提供了许多新的功能和API,其中本地存储能力是其一大亮点。传统的Web应用依赖于Cookie或者HTTP Session来存储用户数据,但这些方法都有其...

    HTML5离线数据库

    HTML5离线数据库,也被称为Web Storage,是HTML5的一项重要特性,旨在改善网页应用程序的离线存储能力,使得用户在没有网络连接时也能访问部分数据。这一特性由两个主要部分组成:`localStorage` 和 `sessionStorage...

    HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,...今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外观不用说,非常漂亮。你看一下DEMO就知道了。

    基于HTML5的手机端记事本设计.pdf

    HTML5 本地数据库概述 HTML5 引入了 Web SQL Database 概念,它使用 SQL 来操纵客户端数据库的 API,所 以可以使用 SQL 语句实现本地数据库的创建、表的创建,数据的增删改查等功能。主要有以下三个核心方法: 1. ...

    html5 离线数据库

    HTML5离线数据库,也被称为Web Storage,是HTML5的一项重要特性,主要为Web应用程序提供了在本地存储数据的能力,使得应用程序即使在网络不畅或者离线状态下也能正常运行。这一特性由两个部分组成:localStorage和...

    html5数据库运用.rar

    这个压缩包"html5数据库运用.rar"显然关注的是HTML5中的离线数据库技术,通常称为Web Storage,特别是IndexedDB。 Web Storage包括两种类型:localStorage和sessionStorage。localStorage用于持久化的数据存储,而...

    HTML5+CSS3 本地数据库操作.pdf

    HTML5的本地数据库操作使得数据存储更加便捷,而CSS3则增强了网页的视觉效果和交互性,共同推动了Web应用向更高级别的用户体验迈进。开发者应熟练掌握这些新技术,以应对不断变化的互联网需求。

    微信小程序与本地数据库的进行基础数据交互的案例资源

    在微信小程序开发中,与本地数据库进行数据交互是常见的需求,尤其在实现用户信息存储、商品管理、订单处理等功能时。本案例资源提供了一个全面的示例,涵盖了从后端Java服务到微信小程序前端,再到数据库操作的完整...

Global site tag (gtag.js) - Google Analytics