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;
})
}