本地存储

　　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()情况数据

　　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()清空数据

　　　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>

　　　　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>

　　　　　</tr>

　　　　　<tr>

　　　　　</tr>

　　　　　<tr>

　　　</table>

　　　<hr/>

　　　</table>

　</body>