在前端数据持久化的方案中，对于简单的数据，使用 sessionStorage 和 localStorage 能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这时必须选用 Web SQL 或者 IndexedDB。Web SQL 数据库不是 HTML5 规范的组成部分，但它允许通过一个异步 JavaScript 接口访问 SQLLite 数据库。
1、基本操作
Web SQL 数据库 API 是以一个独立规范形式出现，它包含 3 个核心方法：
| openDatabase | 使用现有数据库或创建新数据库的方式创建数据库对象 |
|---|---|
| transaction | 允许用户根据情况控制事务提交或回滚 |
| executeSql | 用于执行真实的SQL查询 |
使用 JavaScript 脚本编写 SQLLite 数据库的步骤：
（1）创建访问数据库的对象、（2）使用事务处理
1、创建或打开数据库
openDatabase() 方法能够打开已经存在的数据库，如果不存在则创建。用法如下所示：
Database openDatabase(in DoMString name,in DoMString version,in DoMString display Name,
in unsigned long estimatedsize,in optional DatabaseCallback creationcallback);
//c参数分别是：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有时也可以创建数据库。
下面例子创建了一个数据库对象 db，名称是 Todo，版本编号为 0.1。db 还带有描述信息和大概的大小值。浏览器可使用这个描述与用户进行交流，说明数据库是用来做什么的。利用代码中提供的大小值，浏览器可以为内容留出足够的存储。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。
db = openDatabase("ToDo","0.1","A list of to do items.",200000);
//为了检测之前创建的连接是否成功，可以检查数据库对象是否为null。
if(!db)
alert("Failed to connect to database.");
2、访问和操作数据库
实际访问数据库的时候，还需要调用 transaction() 方法，用来执行事务处理。使用事务处理，可以防止在对数据库进行访问及执行有关操作的时候受到外界的打扰。因为在 Web 上，同时会有许多人都在对页面进行访问。如果在访问数据库的过程中，正在操作的数据被别的用户给修改掉的话，会引起很多意想不到的后果。因此，可以使用事务来达到在操作完了之前，阻止别的用户访问数据库的目的。
transaction() 方法的使用方法如下所示：
db.transaction(function (tx){});
transaction() 方法使用一个回调函数作为参数。在这个函数中，执行访问数据库的语句。在 transaction 的回调函数内，使用了作为参数传递给回调函数的 tansaction 对象的 executeSql 方法。executeSql 方法的完整定义如下所示。
txansaction.executesql(sqlquery,[],dataHandler,errorHandler);
该方法使用4个参数，第1个参数为需要执行的SOL语句。
第2个参数为 SQL 语句中所有使用到的参数的数组，在 executeSql 方法中，将 SQL 语句中所要使用到的参数先用“？”代替，然后依次将这些参数组成数组放在第2个参数中，代码如下：
transaction.executeSql("UPDATE people set age-? where name=2;",[age,name]);
第3个参数为执行 sql 语句成功时调用的回调函数。该回调函数的传递方法如下所示：
Function dataRandler(transaction,resulta){//执行sQL语句成功时的处理
}
该回调函数使用两个参数，第1个参数为 transaction 对象，第2个参数为执行查询操作时返回的查询到的结果数据集对象。
第4个参数为执行SQL语句出错时调用的回调函数。该回调函数的传递方法如下所示：
Function errorHandler(transaction,errmeg){//执行sql语句出错时的处理
}
该回调函数使用两个参数，第1个参数为transaction对象，第2个参数为执行发生错误时的错误信息文字。
下面例子在 mydatabase 数据库中创建表 t1，并执行数据插入操作，完成插入两条记录。
var db = cpenDatabase('mydatabase','2.0', my db',2*1024);
db.transaction(function (tx){
tx.executeSql('CREATE TABLE IE NOT EXISTS t1 (id unique,log)');
tx.executesql('INSERT INTO t1 (id,log) VALUES (1,"foobar")');
tx.executesql('INSERT INTO t1 (id,log) VALUES (2,"logmsg")'):
):
