浅析 HTML5 数据存储的方法及应用

1  HTML5 本地存储简介

HTML5 中新增的功能之一是本地数据库，使用本地数据 库可以在客户端本地建立一个数据库，该数据库以前是必须要 保存在服务器端数据库中的内容，现在可以直接保存在客户端 本地了，这大大减轻了服务器端的负担，同时也加快了访问数 据的速度。该技术在网页中把键值对存储浏览器客户端，这些 数据可以跨越浏览器的刷新以及关闭和重新打开。对于 HT⁃ML5 规范的一部分接口,可以依赖任何第三方插件，浏览器都可以原生支持。

本文主要分析HTML5 的本地存储技术，以Firefox 浏览器 为例介绍   HTML5 的几种本地存储技术。

本地存储的方法为:Web Storage(又分为 LocalStorage 和 Ses⁃sion Storage)、WebSQL 等。不同的场合使用不同种类的本地存储方法。下面将分别介绍这几种本地存储机制。

2Web  Storage 简介

在 Web 上存储数据的功能，即 Web Storage功能。WebStorage 功能的存储主要是针对客户端本地。Web Storage 的存 储功能包含session Storage 和 local Storage 两种不同的存储类 型。sessionStorage 和 local Storage，它们都能支持在同域下存储 5MB 数据，这相比cookies 有着明显的优势，这是能够正确区 分会话数据和长期数据。

2.1  session Storage对象

Session 即会话，是针对一个会话，sessionStorage 则是将数据保存在 session 对象中。用户在浏览网站时，用户从打开网站 到关闭网站所经过的整个时间，这段时间就是用户浏览网站所 花费的时间。其中任何数据都保存在 session 对象中，同时仅在 同一的会话页面中，数据才能访问，一旦会话结束，所有的数据 将销毁。

2.2  local Storage 对象

local Storage对象则是将数据保存在客户端本地的硬件设 备中，如果浏览器被关闭，但这些数据还是存在的。当用户再 次打开浏览器访问网站时，localStorage 对象中的数据仍然可以 继续使用。由此分析，我们可知临时保存用 Session Storage，永久保存用 local Storage。

1）清空 local Storage数据

local Storage 的 clear()函数用于清空同源的本地存储数据， 如 local Storage.clear（），它将删除所有本地存储的local Storage 数据。而Web Storage的另外一部分Session Storage 中的clear函数只清空当前会话存储的数据。

2）遍历 local Storage数据

遍历local Storage 数据主要用到两个方法length 和 key,length 表示中保存的数据总量，key表示保存数据时的键名项，

索引号（index）表示第几条键名对应的数据记录。索引号（in⁃dex）以0 值开始，如果取第3 条键名对应的数据，index值应该是 2。

“获取数据并存储”示例

 

 

 

 

“取出数据显示”示例

 

在 Firefox 浏览器中，用户刷新一次页面，计数器的数值将 加 1。

 

在 Firefox中浏览效果，如果用户刷新一次页面，计数器的 数值将加 1，如果用户关闭浏览器窗口，再次打开该网页，计数 器会继续上一次计数器，而不会重置为1，代码如下：

综上所述，SessionStorage 是一种非持久化的本地存储,它 仅是会话级别的存储。Local Storage是持久化的本地存储,只有 主动删除数据,数据才会过期，否则数据是永远不会过期的。

3）使用   JSON 对象存取数据

在 HTML5 中可以使用JSON 对象来存取一组相关的对 象。使用 JSON 对象可以收集一组用户输入信息，然后创建一 个 Object 来包含这些信息，之后用一个JSON 字符串来表示这 个 Object，然后把JSON 字符串放在local Storage 中。当用户检索指定名称时，会自动用该名称去local Storage 取得对应的JSON 字符串，将字符串解析到Object 对象，然后依次提取对应的信息，并构造HTML 文本输入显示。

3 WebSQL数据库

在 HTML5 中内置了一个可以通过SQL 语言来访问数据 库，即 Web SQL。Web SQL 数据库是能够在客户端存储大量结构化数据，是适用于关系数据库的本地存储技术。我们可以使用本地和会话存储完成对简单的关键值或简单对象进行存储， 但是如果处理琐碎的关系数据时，就无能为力了，此时需要 WebSQL 数据库。对于数据库使用，设计到打开数据库，执行SQL 命令。

但需要我们注意的是，在使用服务器端的一个数据库时， 需要关闭数据库。

WebSQL的 3个核心方法，分别为 openDatabase、transac⁃ tion、executeSql。

1）打开与创建数据库

可以使用 OpenDatabase 方法打开一个已经存在的数据库， 如果数据库不存在，使用此方法将会创建一个新数据库。打开 或创建一个数据库的代码如下。

 

上述代码的括号中设置了五个参数，括号中的参数意义依 次为数据库名称、版本号、文字说明、数据库的大小和创建回滚。在操作时，如果“mydb”数据库不存在，将自动创建数据库 “mydb”。如果创建的连接不成功，则数据库对象为 null。

 

为了确保应用程序有效，并且检测对 数据库 API 的支持， 还应该测试浏览器对数据库的支持，所以要进行测试，绝不可 以假设该连接成功。

2）执行事务

访问数据库的时候，还需要使用 transaction方法，用来执行 事务处理。使用事务处理，可以防止在对数据库进行访问及执 行有关操作的时候收到外界的打扰。因为在 WEB上，同时会 有许多人都在对页面进行访问，如果访问数据库的过程中，正在操作的数据被别的用户给修改掉的话，会引起很多意想不到的后果。

database.transaction( )需要一个参数，该参数是一个函数。 实际执行的查询服务如下：

 

同时可以利用 SQL 语句为表插入一些新数据，也可以管理 现有数据。

3)SQL 操作结果处理方法

SQL 操作结果2 种，分别为成功和失败。针对成功和失败 这两种结果,采取不同的处理方法。

当 SQL 操作结果为成功时,执行的回调函数有两个参数， 分别是执行事务对象、查询返回的结果。

 

当 SQL操作结果为失败时,执行的回调函数为一个,回调函 数中仅有一个参数,即错误对象，可以通过此错误对象获知具体的错误信息。

 

 

总之，在 HTML5中，大大丰富了客户端本地可以存储的内 容，添加了许多功能来将原本必须要保存在服务器上的数据转换为保存在客户端本地，从而大大提高了 WEB应用程序的性能，减轻了服务器端的负担。

4 小结

通过比较分析几种存储技术，我们了解了要实现设计系统 的离线功能需要将远程数据库的数据复制到本地数据库，并选 取一种合适的本地存储技术。

比如我的案例：汽车干扰遥控器

参考文献：

[1] 张慧. 基于 HTML5 的本地数据库与服务端数据库的协同研究[D].  武汉:武汉理工大学,2013.

[2] 张永瑞.基于HTML5 的 Web 离线技术在技能训练导学平台中的应用[J].  长江大学学报：自然版,2013(10).

[3] 王康.基于 HTML5 的 3DsMax 课程教学资源交流平台的设计与开发[D]. 广州:中山大学,2014.

[4] 陈泽鹏.基于 HTML5 技术的移动数字校园的研究与应用[D]. 长沙:湖南大学,2014.

[5] 龙马工作室. 网页设计与制作实战从入门到精通[M]. 北京：人民邮电出版,2015.

6.四海电子解码有限公司