HTML5 提供了四种在客户端存储数据的新方法，即 localStorage 、sessionStorage、globalStorage、Web Sql Database。
一，localStorage ：
localStorage 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。也就是说，localStorage是永远不会过期的，除非主动删除数据。数据可跨越多个窗口，无视当前会话，被共同访问、使用。有点像AspNet 应用程序中的全局变量Application。
二，sessionStorage ：
顾名思义它就如同AspNet中的Session。 针对一个 session 的数据存储，任何一个页面存储的信息在窗口中同一网站的任何页面都可以访问它存储的数据。每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的。
localStorage /sessionStorage都有相同的Api 如
localStorage.length 获得storage中的个数
localStorage .key(n) 获得storage中第n个键值对的键
localStorage.key = value
localStorage.setItem(key, value) 添加
localStorage.getItem(key)获取
localStorage.removeItem(key) 移除
localStorage.clear() 清除
从上面的Api可以看出，他们其实就是键/值对，就是字典，就是JSON。既然可以看作是json ，那么对他们的操作就可以有如下方式:
如：localStorage.name="liuzongyi" ;//添加
localStorage["name"]="liuzongyi" ; //添加
alert(localStorage.name);//获取
alert(localStorage["name"]);//获取
三，globalStorage：
在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。目前只有FF支持，且只支持当前域下的globalStorage存储。
基本用法：
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage[''] —— 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。
方法属性：
setItem(key, value) —— 设置或重置 key 值。
getItem(key) —— 获取 key 值。
removeItem(key) —— 删除 key 值。
设置 key 值：window.globalStorage["planabc.net"].key = value;
获取 key 值：value = window.globalStorage["planabc.net"].key;
四，Web Sql DataBase
这节介绍Html5 本地存储中的一个很重要的概念——Web Sql Database ，正因为本人觉得这个很重要，所有独立出来重点介绍。即时你完全没听说过这个概念，望文生义也应该知道它大概是个什么东西。
对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这也是 HTML 5 的“Web SQL Database”API 接口的应用所在。
下面我将一一将介绍怎样 创建打开数据库，创建表，添加数据，更新数据，删除数据，删除表 。
先介绍三个核心方法
1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql：这个方法用于执行真实的SQL查询。
第一步：打开连接并创建数据库
if (!dataBase) {
alert("数据库创建失败！");
} else {
alert("数据库创建成功！");
}
解释一下openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
第二步：创建数据表
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){ alert('创建stu表失败:' + error.message);
});
});
}
第三步：执行增删改查
1）添加数据：
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message);
} );
});
2）查询数据
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}
result：查询出来的数据集。其数据类型为 SQLResultSet ，就如同C#中的DataTable。
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}
4）删除数据
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}
5）删除数据表
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}
了解更多：http://www.w3.org/TR/webdatabase/