Html5的Web存储和WebSql

HTML5 Web 存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

本地存储的背景

众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。

下面是Cookie的限制：

1. 1, 大多数浏览器支持最大为 4096 字节的 Cookie。
2. 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。
3. 3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。
4. 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();