HTML5 Web 存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
本地存储的背景
众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。
下面是Cookie的限制：
- 1, 大多数浏览器支持最大为 4096 字节的 Cookie。
- 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。
- 3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。
- 4, Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie的，比如：js、css、图片等请求则不需要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);
HTML5 Web SQL 数据库
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();