HTML4使用Cookie来存储简单的数据。但Cookie有以下限制：大多数浏览器支持最大为4096字节的Cookie；浏览器还限制站点可以在用户计算机上存储的Cookie的数量，则最旧的Cookie将被丢弃；有些浏览器还会对他们将接受的来自所有站点的Cookie总数做出绝对限制，通常为300个；Cookie默认情况会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie。
HTML5通过JS的新的API直接存储大量数据到客户端浏览器，支持复杂的本地数据库，让JS更有效率。HTML5支持两种WebStorage：永久性的本地存储(localStorage)和会话级别的本地存储(sessionStorage)。
永久性的本地存储(localStorage)
localStorage提供了四个方法来辅助我们进行本地存储做相关操作：setItem(key, value)添加本地存储数据。 getItem(key)通过key获取相应的value removeItem(key)通过key删除本地数据 clear()情况数据
<script type="text/javascript">
localStorage.setItem("demokey", "http://www.shiyanlou.com");
var dt = localStorge.getItem("demoKey");
localStorage.clear();
</script>
会话级别的本地存储(sessionStorage)
通过sessionStorage可以直接操作存储在浏览器中的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外是它跟浏览器当前会话相关，当回话结束后，数据会自动清楚，跟未设置过期时间的Cookie类似。sessionStorage提供了四个方法来辅助我们进行本地数据存储做相关操作：setItem(key, value)添加本地存储数据。 getItem(key)通过key获取相应的value removeItem(key)通过key删除本地数据 clear()清空数据
<script type="text/javascript">
sessionStorage.setItem("demoKey", "http://blog.itjeek.com");
var dt = sessionStorage.getItem("demoKey");
sessionStorage.clear();
</script>
HMT5本地数据库
HTML5提供了一个浏览器端数据库支持，允许我们直接通过JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据。
操作本地数据库的最基本步骤：创建一个访问数据库的对象(openDatabase)；使用openDatabase对象来执行transaction方法，通过次方法可以实质一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL；通过executeSql方法执行查询。
openDatabase方法打开一个已存在的数据库，若数据库不存在，它还可以创建一个数据库。
var database = openDatabas("student", "1.0", "学生表", 1024*1024, function(){}); //参数分别对应数据库名称、数据库版本号、对数据库的描述、设置分配的数据库大小(单位是kb)、回调函数。
db.transaction方法可以设置一个回调函数，此函数可以接受一个参数使我们开启事务的对象，然后通过此对象执行SQL。
ts.executeSql(sqlQuery, [value1, value2..], dataHandler, errorHandler) //参数分别对应需要具体执行的sql语句(可以是create、select、update、delete)、sql语句中所有使用的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用?代替，然后一次将这些参数组成数组放在[]中、执行成功时调用的回调函数，通过该函数可以获得查询结果集、执行失败时的回调函数。
<head>
<script type="jquert-1.5.1.js' type="text/javascript">
function initDatabase(){
var db = getCurrentDb();
if(!db)
alert("您的浏览器不支持HTML5");
db.transaction(function(trans){
trans.executeSql("create table if not exists Demo(uName text null, title text null, words text null)", [], function(trans, result){}, function(trans, message){}, function(trans, result){}, function(trans, message){});
});
}
$(function(){
initDatabase();
$("#btnSave").click(function(){
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
var txtWords = $("txtWords").val();
db.transaction(function(trans){
trans.executeSql("insert into Demo(uName, title, words) values(? , ? , ?)", [txtName, txtTitle, txtWords], function(ts,data){}, function(ts, message){
alert(message);
});
});
showAllTheData();
});
});
function getCurrentDb(){
var db = openDatabase("myDb", "1.0", "it's to save demo data", 1024*1024);
return db;
}
function showAllTheData(){
$("tblData").empty();
var db =getCurrentDb();
db.transaction(function(trans){
trans.executeSql("select * from Demo", [], function(ts, data){
if(data){
for(var i=0 ; i < data.rows.length; i++){
appendDataToTable(data.rows.item(i));
}
}
},function(ts, message){
alert(message);
});
});
}
function appendDateToTable(data){
var txtName = data.uName;
var txtTitle = data.title;
var words = data.words;
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>"+txtName+"</td>";
strHtml += "<td>"+txtTitle+"</td>";
strHtml += "<td>"+words+"</td>";
strHtml += "</tr>";
$("#tblDate").append(strHtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="txtName" id="txtName" required/></td>
</tr>
<tr>
<td>标题：</td>
<td><input type="text" name="txtTitle" id="txtTitle" required/></td>
</tr>
<tr>
<td>留言：</td>
<td><input type="text" name="txtWords" id="txtWords" required/></td> </tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>