标签：
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。
下面是Cookie的限制：
Html5的设计者们，一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制，Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS简直就是逆天了。Html5支持两种的WebStorage，一种是永久性的本地存储（localStorage），另外一种是会话级别的本地存储（sessionStorage）。
/**
* sessionStorage,localStorage统一的操作方法：
* （1）setItem(key,value)：添加本地存储数据。
* （2）getItem(key):通过key获取相应的Value。
* （3）removeItem(key):通过key删除本地数据。
* （4）clear():清空数据。
*/
/**
* 会话级别的本地存储：sessionStorage
*/
sessionStorage.setItem(11,"a");
var numLocal = sessionStorage.getItem(11);
console.info("sessionStorage会话级别的本地存储"+numLocal);
sessionStorage.setItem(22,"b");
console.info("sessionStorage会话级别的本地存储个数："+sessionStorage.length);
sessionStorage.removeItem(22);
console.info("sessionStorage会话级别的本地存储个数："+sessionStorage.length);
//sessionStorage.clear();
console.info("sessionStorage会话级别的本地存储个数："+sessionStorage.length);
/**
* 永久本地存储：localStorage
*/
localStorage.setItem("a",11);
var numLocal = localStorage.getItem("a");
console.info("localStorage永久本地存储"+numLocal);
localStorage.setItem("b",22);
console.info("localStorage本地存储个数："+localStorage.length);
localStorage.removeItem("a");
console.info("localStorage本地存储个数："+localStorage.length);
//localStorage.clear();
console.info("localStorage本地存储个数："+localStorage.length);
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
/**
* 本地数据库
* 操作本地数据库的最基本的步骤是：
* 第一步：openDatabase方法：创建一个访问数据库的对象。
* 第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.
* 第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。
*/
function dataBaseCRUD(){
var dataBase = openDatabase("school", "1.0", "学校数据库", 1024 * 1024, function () {
console.info("创建学校数据库成功！");
});
/**
* （1）openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
* 1，数据库名称。
* 2，数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
* 3，对数据库的描述。
* 4，设置分配的数据库的大小（单位是kb）。
* 5，回调函数(可省略)。
*/
if(!dataBase){
console.info("当前浏览器不支持Html5本地数据库");
return false;
}else{
debugger;
dataBase.transaction(function (ts) {//启动一个事务，并设置回调函数
ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],function(ts,result){
console.info("创建数据库成功"+result);
},function(ts,message){
console.info("创建数据库失败",message);
});
});
dataBase.transaction(function (ts) {
ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [1,"小明", 21, "男"], function (ts, result) {
console.info("插入数据成功！"+result);
}, function (ts, message) {
console.info("插入数据失败！"+message);
});
});
dataBase.transaction(function (ts) {
ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [2,"小红", 20, "女"], function (ts, result) {
console.info("插入数据成功！"+result);
}, function (ts, message) {
console.info("插入数据失败！"+message);
});
});
dataBase.transaction(function (ts) {
ts.executeSql("update Student set name = ? where id = ? ", ["小红s",2], function (ts, result) {
console.info("更新数据成功！"+result);
}, function (ts, message) {
console.info("更新数据失败！"+message);
});
});
dataBase.transaction(function (ts) {
ts.executeSql("delete from Student where id = ? ", [2], function (ts, result) {
console.info("删除数据成功！"+result);
}, function (ts, message) {
console.info("删除数据失败！"+message);
});
});
dataBase.transaction(function (ts) {
ts.executeSql("select * from Student ", [], function (ts, result) {
if (result) {
for (var i = 0; i < result.rows.length; i++) {
console.info((result.rows.item(i)));
}
}
console.info("查询数据成功！");
}, function (ts, message) {
console.info("查询数据失败！"+message);
});
});
}
/**
* （2）db.transaction方法可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本，跟下面的步骤可以结合起来。
* （3）通过executeSql方法执行查询。
* ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
* 参数说明：
* 1，sqlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
* 2，[value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中
* 3，dataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
* 4，errorHandler：执行失败时调用的回调函数；
*
*/
}
dataBaseCRUD();
标签：
原文地址：http://www.cnblogs.com/chengxuyuanzhilu/p/5692897.html
