HTML5系列：HTML5本地存储

1. Web Storage存储

　　HTML4在客户端存储数据通常使用Cookie存储机制将数据保存在用户的客户端，但使用Cookie方式存储客户端数据存在一系列的制约发展因素，如限制存储数据空间大小、数据安全性差等。

　　HTML5中新增两种数据存储方式：Web Storage和Web SQL Database。前者可用于临时或永久保存客户端的少量数据，后者是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，而无需与服务器交互。

　　Web Storage页面存储根据Web Storage API区分会话数据与长期数据，相应的API类型分为两种：

　　sessionStorage（保存会话数据）

　　localStorage（在客户端长期保存数据）

　　两者的区别在于sessionStorage为临时保存，localStorage为永久保存。

1.1 sessionStorage对象

　　sessionStorage对象保存数据实质的保存在session对象中，用户在打开浏览器时，可以查看操作过程中要求的临时数据，一旦关闭浏览器，所有使用sessionStorage对象保存的数据都将会丢失。

　　sessionStorage对象保存数据：

sessionStorage.setItem(key, value);

其中，key表示存储数据的键名，value表示存储数据的键值。

　　sessionStorage对象读取数据：

sessionStorage.getItem(key)

其中，key表示存储数据的键名，该方法将返回一个指定键名的键值，如果不存在，则返回null。

1.2 localStorage对象

　　sessionStorage对象只能保存用户临时的会话数据，关闭浏览器后，数据都将丢失。localStorage对象可以将数据长期保存在客户端，直至人工清除为止。

　　localStorage对象保存数据：

localStorage.setItem(key, value)

其中，key表示存储数据的键名，value表示存储数据的键值。

　　localStorage对象读取数据：

localStorage.getItem(key)

其中，key表示存储数据的键名，该方法将返回一个指定键名的键值，如果不存在，则返回null。

　　localStorage对象删除数据：

localStorage.removeItem(key)

其中，key表示要删除的存储数据的键名。

　　清空localStorage对象数据：

localStorage.clear()

　　该方法无参数，表示清空全部的数据。

　　遍历localStorage数据：

　　遍历localStorage对象保存的数据，需要使用localStorage对象的两个属性：length与key。length表示localStorage对象中保存数据的总条数，key表示保存数据时的键名，key常与索引号(index)配合使用，表示第几条键名对应的数据记录。其中，索引号(index)从0开始。

for (var index =0; index < localStorage.length; index++) {
    var key = localStorage.key(index);
    var value = localStorage.getItem(key);
}

　　使用JSON对象存取数据：

　　在HTML5中可以通过localStorage数据与JSON对象进行转换，如果要将localStorage对象数据转换成JSON对象，需要调用JSON对象的parse()方法。

JSON.parse(data);

其中，data表示localStorage对象获取的数据，调用该方法将返回一个装载data数据的JSON对象。可以使用stringify()方法将一个实体对象转换为JSON格式的文本数据。

JSON.stringify(data);

其中，data表示任意的实体对象，调用该方法将返回一个由实体对象转换成JSON格式的文本数据集。

　　示例

var userdata = new Object();
userdata.UserName = 'UserName';
userdata.Password = 'Password';
var struserdata = JSON.stringify(userdata);
localStorage.setItem('user', struserdata);

2. Web SQL数据库

　　Web Storage存储空间只有5MB，仅提供键值存储的方式。Web SQL数据库（Web SQL DataBase， WebDB）内置SQLite数据库，对数据库的操作可以通过调用executeSql()方法来实现，允许使用JavaScript代码进行数据库操作。

2.1 打开与创建数据库

　　通过WebD版进行本地数据的存储，需要先打开或创建一个数据库，打开或创建数据库的API调用代码格式：

openDatabase(DBName, DBVersion, DBDescribe, DBSize, Callback());

其中，DBName表示数据库名称，DBVersion表示版本号，DBDescribe表示对数据库的描述，DBSize表示数据库的大小，单位为字节，如果是2MB，写成2*1024*1024，Callback()表示创建或打开数据库成功之后执行的一个回调函数。

　　调用该方法时，如果指定的数据库名存在，则打开该数据库；否则，新创建一个指定名称的空数据库。

　　示例：

var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024, function () {
    document.getElementById("result").innerHTML = "数据库创建成功！";
});

2.2 执行事务

　　在打开/创建数据库之后，可以使用数据库对象中的transaction()方法执行事务处理。每一个事务处理请求都作为数据库的独立操作，避免在处理数据时发生冲突。调用的语法格式：

transaction(TransCallback, ErrorCallback, SuccessCallback);

其中，TransCallback表示事务回调函数，可以写入需要执行的SQL语句；ErrorCallback表示执行SQL语句出差时的回调函数，SuccessCallback表示执行SQL语句成功时的回调函数。

　　示例：

var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024);
if (db) {
    var strSql = "create table if not exists User(UserID unique, UserName text, Password text)";
    db.transaction(function (tx) {
        tx.executeSql(strSql);
    }, function () {
        document.getElementById("result").innerHTML = "事务执行失败！";
    }, function () {
        document.getElementById("result").innerHTML = "事务执行成功！";
    })
}

2.3 插入数据

　　执行SQL语句的executeSql()方法，调用格式：

executeSql(strSQL, [Arguments], SuccessCallback, ErrorCallback);

其中，strSQL表示需要执行的SQL语句， Arguments表示语句需要的参数，SuccessCallback表示SQL语句执行成功时的回调函数，ErrorCallback表示SQL执行出错时的回调函数。

　　在使用executeSql()方法执行SQL语句时，允许使用“?”作为语句中的形参，与形参对应的实参放置在第二个参数Arguments中。

　　示例：

executeSql("insert into User values (?,?,?)", ["1", "TestUserName", "TestPassword"]);

var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024);
if (db) {
    var strSql = "insert into User values (?, ?, ?)";
    db.transaction(function (tx) {
        tx.executeSql(strSql, [
            document.getElementById("txtUserID").value,
            document.getElementById("txtUserName").value,
            document.getElementById("txtPassword").value
        ]);
    }, function () {
        document.getElementById("txtUserID").value = "";
        document.getElementById("txtUserName").value = "";
        document.getElementById("txtPassword").value = "";
        document.getElementById("result").innerHTML = "一条记录添加成功！";
    }, function (tx, ex) {
        document.getElementById("result").innerHTML = ex.message;
    })
}