第11章-本地存储

一、Web Storage

在HTML5中，除了引入canvas绘图元素之外，另一个新增的重要特性就是本地存储。HTML5复用Web Storage可以实现在客户端本地保存数据的功能。在HTML5中将使用Web Storage存储机制代替cookies。目前，Safari5+、Chrome、Firefox、Opera以及IE8+都已支持Web Storage。

Web Storage的常用属性和方法

Web Storage是HTML5引入的一个非常重要的新特性，实现了在客户端本地存储数据的功能。它与HTML4的cookies类似，但功能上比cookies要强大得多。例如，cookies的大小一般被限制为4KB，而Web Storage官方建议是5MB。

Web Storage可以分为sessionStorage和localStorage两种。

1)sessionStorage

sessionStorage将数据保存在session对象中，session对象通常在客户端浏览器连接到服务器时建立，在浏览器关闭时销毁。sessionStorage中保存的数据在客户端浏览器连接到服务器端后一直到断开连接前，都可以访问。当会话结束后，数据会自动清除。

2)localStorage

localStorage一直将数据保存在客户端本地的硬件设备，如硬盘等，即使浏览器关闭，localStorage中的数据仍然存在，当下一次客户端浏览器再次访问服务器时，其中的数据仍然可以继续访问。

因此，sessionStorage和localStorage的区别在于，sessionStorage是临时保存数据的对象，而localStorage可以永久保存数据。

创建和访问localStorage对象，例如：

<script>
    localStorage.lastname="Smith";
    document.write(localStorage.lastname);
</script>

保存数据的方法：

localStorage.setItem("username","smith");或localStorage.username="smith";

读取数据的写法：

var un=localStorage.getItem("username");或var un=localStorage.username;

删除数据的写法：

localStorage.removeItem("c");

无论是sessionStorage还是localStorage，常用的API都相同。

属性名/方法名	描述
length	所有保存在Web Storage中的数据的个数
setItem(key,value)	保存数据，保存数据时使用"键/值"对的格式保存，键和值都为字符串类型。不允许保存重复键名
getItem(key)	读取数据，读取键名为key的数据的值
removeItem(key)	删除数据，删除键名为key的数据
clear()	清空数据
key(index)	获取索引值为index的键名key，index从0开始

二、本地数据库：

虽然HTML5提供了功能强大的sessionStorage和localStorage实现本地存储，但这两个对象均适合存储简单数据结构的数据，对于复杂的Web应用的数据结构，就不适用了。因此，HTML5又提供了浏览器端的本地数据库支持，允许直接通过JavaScript在客户端浏览器创建一个本地数据库，并且支持标准SQL的增、删、改、查操作，让离线Web应用能够更加方便地存储结构化数据，大大丰富了客户端本地可以存储的数据内容，使得原本必须保存在服务器端的数据转化为保存在客户端本地，从而大大提高了Web应用的性能，减轻了服务器端的负担。

本地数据库访问

HTML5内置了一个SQLite数据库作为本地数据库，可以通过标准SQL访问。操作本地数据库的最基本的步骤如下：

1)openDatabase方法：创建一个访问数据库的对象。

2)使用步骤1)创建的数据库访问对象执行transaction方法，通过此方法可以执行事务处理，在该方法的回调函数中可以执行SQL语句。

3)通过executeSql方法执行SQL命令，通常包括增、删、改、查4种操作。

下面分别介绍这些常用方法的使用：

➀创建访问数据库的对象

首先，必须使用openDatabase方法创建一个访问数据库的对象，例如：

var db=openDatabase("mydb", "1.0", "My first DB", 2*1024*1024);

参数1：创建的数据库名；参数2：数据库版本；参数3：数据库描述信息；参数4：数据库大小(单位:KB)。

该方法执行时，如果第一个参数指明的数据库不存在，则会创建该数据库，并返回数据库访问对象；若该数据库已存在，则直接返回该数据库的访问对象。

➁调用transaction方法

一般需要把SQL命令的执行放在事务中，这样可以防止在对数据库进行访问和执行相关操作时被其他操作干扰。因为很有可能同时有多个用户在对数据库进行访问，若正在操作的数据被其他用户修改，就会引起很多意想不到的后果。因此，可以使用事务处理，在当前操作完成之前阻止其他用户访问和操作数据库。

transaction方法的使用如下：

db.transaction(function(tx){
    tx.executeSql(SQL, [value1,value2,...], dataHandler, errorHandler);
});

transaction方法的参数用于设置一个回调函数，这个回调函数的参数就是开启的事务对象，通过此事务对象，可以执行SQL命令。

➂通过executeSql方法执行SQL命令

executeSql的完整定义格式如下：

tx.executeSql(SQL, [value1, value2, ...], dataHandler, errorHandler);

参数1：代表需要执行的SQL命令；

参数2：代表用于替换SQL命令中所有参数点位符的数组；SQL命令中的参数值可以使用"?"点位符代替，然后依次将用于替换这些点位符的变量放在数组中即可。例如：

tx.executeSql("select * from mytable where username=? and password=?",[username, password]);

参数3：代表成功执行SQL命令时调用的回调函数；该函数包含两个参数:I.事务处理对象;II.执行查询操作时返回的结果集对象。

function dataHandler(transaction,results){
    //执行SQL命令成功时需要进行的操作
}

参数4：代表执行SQL命令失败时调用的回调函数；该函数包含两个参数:I.事务处理对象;II.执行SQL发生错误时返回的错误信息。

function errorHandler(transaction,errormsg){
    //执行SQL命令失败时需要进行的操作
}

当执行的SQL命令为查询操作时，通常会使用for循环遍历查询的结果集数据。结果集对象有一个rows属性，其中保存了结果集中的每一条记录，记录的个数可以使用rows.length获取。在for循环的循环体中使用rows[index]或rows.item(index)依次取出结果集中的每条记录。

例如，使用如下语句可以将结果集中的所有数据依次取出：

db.transaction(function(tx){
    tx.executeSql("select * from mytable",[],
        function(ts, results){
            if(results){
                for(var i=0;i<results.rows.length;i++){
                    ////获取结果集中的第i行数据
                    results.rows[i];（或：result.rows.item(i);）
                }
            }
        },
        function (ts, message){
            alert(message);
        }
    )
});