HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]

使用环境：Chrome 36.0...+

技术：HTML5

目的：习练HTML5

功能概述：记录管理每天工作内容，便签清单

                     HTML5+CSS3呈现UI，JavaScript操作数据库，SQLite存储数据

预览：

关键代码：

            // save data
            function dataStorage(o) {

                for (var i = 0; i < o.childNodes.length; i++) {
                    if (o.childNodes[i].nodeName == "P") {
                        o.removeChild(o.childNodes[i]);
                    }
                }

                if (o.innerText.replace(/s+/g, "").length == 0) {
                    return;
                }

                var task = new Object();
                task.task = o.innerText;
                task.progressid = 2;
                task.progress = ProgressEnum[task.progressid];
                if (o.id == "newEditNode") {
                    o.removeAttribute("id");
                    task.year = nowDate.getFullYear();
                    task.month = nowDate.getMonth() + 1;
                    task.day = nowDate.getDate();

                    // open a database transaction
                    DB.transaction(function(tx) {
                        // insert into table(task,progress,year,month,day)
                        tx.executeSql('INSERT INTO ' + TableName + ' VALUES(?,?,?,?,?,?,0)', [task.task, task.progress, task.progressid, task.year, task.month, task.day],
                        // success:show success log in console
                        function(tx, rs) {
                            queryData(o.parentElement.id);
                            console.log("save data successfully!");
                        },
                        // fail:show error log in console
                        function(tx, error) {
                            console.log(error.source + "::" + error.message);
                        });
                    });
                } else {
                    DB.transaction(function(tx) {
                        // update
                        tx.executeSql('UPDATE ' + TableName + ' SET task=? WHERE rowid=?', [task.task, o.id],
                        // success:show success log in console
                        function(tx, rs) {
                            queryData(o.parentElement.id);
                            console.log("update data successfully!");
                        },
                        // fail:show error log in console
                        function(tx, error) {
                            console.log(error.source + "::" + error.message);
                        });
                    });
                }
            }

            // query data
            function queryData(parentId) {
                document.getElementById(parentId).innerHTML = "";
                DB.transaction(function(tx) {
                    tx.executeSql('SELECT rowid,* FROM ' + TableName + ' WHERE enabled=0 ORDER BY progressid ASC, rowid DESC', [], function(tx, rs) {
                        for (var i = 0; i < rs.rows.length; i++) {
                            createNode(rs.rows.item(i), parentId);  //create node to show data
                        }
                    });
                });
                createEditNode(parentId); // create new edit node
            }

            //change current date
            function changeDate(cid, m) {
                nowDate = new Date(document.getElementById(cid).innerText);
                if (m == "+") {
                    nowDate.setDate(nowDate.getDate() + 1);
                } else {
                    nowDate.setDate(nowDate.getDate() - 1);
                }
                document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate();
                TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate();
                DB.transaction(function(tx) {
                    //create data table
                    tx.executeSql('CREATE TABLE IF NOT EXISTS ' + TableName + '(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)', []);
                });
                queryData("divcontent");
            }


            function load() {
                if (navigator.appCodeName != "Mozilla") {
                    
                } else {
                    /* ---- start program --- */
                    // create database
                    nowDate = new Date();
                    ProgressEnum = ["Executing", "Reform", "Pending", "Finished", "Cancel"];
                    TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate();
                    document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate();
                    DB = openDatabase("toDoList", '', 'To Do list DataBase', 102400);
                    DB.transaction(function(tx) {
                        //create data table
                        tx.executeSql('CREATE TABLE IF NOT EXISTS ' + TableName + '(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)', []);
                    });
                    queryData("divcontent");
                }
            }

URL:http://dicolancy.github.io/DemoCode/html5/todolist_chrome.html