htm5本地存儲方案——websql的封裝

一、websql 簡介

  在HTML5中，大大豐富了客戶端本地可以存儲的內容，添加了很多功能來將原本必須保存在服務器上的數據轉為保存在客戶端本地，從而大大提高了Web應用程序的性能，減輕了服務器端的負擔，使Web時代重新回到了“客戶端為重，服務器為輕”的時代。

在這其中，一項非常重要的功能就是數據庫的本地存儲功能。在HTML5中內置了一個可以通過SQL語言來訪問的數據庫。在HTML4中，數據庫只能放在服務器端，只能通過服務器來訪問數據庫，但是在HTML5中，可以就像訪問本地文件那樣輕松的對內置的數據庫進行直接訪問。現在，像這種不需要存儲在服務器上的，被稱為“SQLite”的文件型SQL數據庫已經得到了很廣泛的利用，所以HTML5中也采用了這種數據庫來作為本地數據庫。

  百度來的，websql已經停止更新了，不過還是可以用用。

二、不BB直接上代碼

var wsql_DBName = 'yiliapp'; // 數據庫名
var wsql_ver = '1.0'; // 數據庫版本
var wsql_description = 'yiliapp數據庫'; // 數據庫描述
var wsql_dbSize = 3 * 1024 * 1024; // 數據庫大小, 其實無所謂，塞多了自己會自動撐大的
var wsql_kv_db = null; // 暫存數據庫對象
var wsql_message = "message"; // 數據庫中的表單名
var wsql_chat = "chat"; // 數據庫中的表單名

/**
 * 打開數據庫
     websqlOpenDB();
    websqlOpenDB(true);
 * @param {是否重開} isReopen
 */
function websqlOpenDB(isReopen) {
    if(!isReopen && wsql_kv_db != null)
        return;
    // 數據庫有就打開 沒有就創建
    wsql_kv_db = window.openDatabase(wsql_DBName, wsql_ver, wsql_description, wsql_dbSize, function() {});
    if(wsql_kv_db) {
        // alert("數據庫創建/打開成功! ["+ wsql_庫名 +"], 容量="+ wsql_dbSize);
        websql_CreateMessage(wsql_message);
        websql_CreateChat(wsql_chat);

    } else {
        alert("error:數據庫創建/打開失敗！");
    }
    return wsql_kv_db;
}
/**
 * 
 * 消息表
 */
function websql_CreateMessage() {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    // sqlite 的 varchar 其實就是 text, 所以干脆統一使用 text字段類型
    var creatTableSQL = 'CREATE TABLE IF NOT EXISTS ' + wsql_message + ' (userid text,fid text,nickname text, head text,content text,time text,count INTEGER)';
    wsql_kv_db.transaction(function(ctx, result) {
        ctx.executeSql(creatTableSQL, [], function(ctx, result) {
            // alert("表創建成功 " + wsql_表名);
        }, function(tx, error) {
            alert('創建表失敗:' + wsql_message + "\n" + error.message);
        });
    });
}
/**
 *聊天記錄表
 * 
 */
function websql_CreateChat() {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    // sqlite 的 varchar 其實就是 text, 所以干脆統一使用 text字段類型
    var creatTableSQL = 'CREATE TABLE IF NOT EXISTS ' + wsql_chat + ' (userid text,fid text,type text,self INTEGER,content text, time datetime)';
    wsql_kv_db.transaction(function(ctx, result) {
        ctx.executeSql(creatTableSQL, [], function(ctx, result) {
            // alert("表創建成功 " + wsql_表名);
        }, function(tx, error) {
            alert('創建表失敗:' + wsql_chat + "\n" + error.message);
        });
    });
}

/**
 * 插入數據到message表
 * @param {Object} data
 */
function websql_InsertToMessage(data) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var insertTableSQL = 'INSERT INTO ' + wsql_message + ' (userid,fid,nickname,head,content,time,count) VALUES (?,?,?,?,?,?,?)';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(insertTableSQL, [data.userid, data.fid, data.nickname, data.head, data.content, data.time, data.count], function(ctx, result) {
                // console.log("插入" + wsql_表名  + NAME + "成功");
                alert("插入" + wsql_message + " 成功");
            },
            function(tx, error) {
                alert('插入失敗: ' + error.message);
            });
    });
}

/**
 * 插入數據倒chat表
 * @param {Object} data
 */
function websql_InsertToChat(data) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var insertTableSQL = 'INSERT INTO ' + wsql_chat + ' (userid,fid,type,self,content,time) VALUES (?,?,?,?,?,?)';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(insertTableSQL, [data.userid, data.fid, data.type, data.self, data.content, data.time], function(ctx, result) {
                // console.log("插入" + wsql_表名  + NAME + "成功");
                alert("插入" + wsql_chat + " 成功");
            },
            function(tx, error) {
                alert('插入失敗: ' + error.message);
            });
    });
}

/**
 * 獲取message表數據
 * @param {用戶id} userid
 */
function websql_GetMessageById(userid) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var selectById = 'SELECT * FROM ' + wsql_message + ' WHERE userid = ?';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(selectById, [userid.toString()], function(ctx, result) {
                alert('查詢成功: ' + wsql_message + result.rows.length);
                var len = result.rows.length;
                for(var i = 0; i < len; i++) {
                    console.log(result.rows.item(i));
                }
            },
            function(tx, error) {
                alert('查詢失敗: ' + error.message);
            });
    });
}

/**
 * 獲取chat表數據
 * @param {用戶id} userid
 * @param {好友id} fid
 */
function websql_GetChatById(userid, fid) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var selectById = 'SELECT * FROM ' + wsql_chat + ' WHERE userid = ? and fid = ? order by time';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(selectById, [userid.toString(), fid.toString()], function(ctx, result) {
                alert('查詢成功: ' + wsql_message + result.rows.length);
                var len = result.rows.length;
                for(var i = 0; i < len; i++) {
                    console.log(result.rows.item(i));
                }
            },
            function(tx, error) {
                alert('查詢失敗: ' + error.message);
            });
    });
}
/**
 * 刪除message表數據
 * @param {用戶id} userid
 * @param {好友id} fid
 */
function websql_DeleteMessageByid(userid, fid) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var deleteDataSQL = 'DELETE FROM ' + wsql_message + ' WHERE userid = ? and fid=?';
    wsql_kv_db.transaction(function(ctx, result) {
        ctx.executeSql(deleteDataSQL, [userid.toString(), fid.toString()], function(ctx, result) {
            alert("刪除成功 " + wsql_message);
        }, function(tx, error) {
            alert('刪除失敗:' + error.message);
        });
    });
}

/**
 * 刪除message表數據
 * @param {用戶id} userid
 * @param {好友id} fid
 */
function websql_DeleteChatByid(rowid) {
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var deleteDataSQL = 'DELETE FROM ' + wsql_chat + ' WHERE rowid =?';
    wsql_kv_db.transaction(function(ctx, result) {
        ctx.executeSql(deleteDataSQL, [rowid], function(ctx, result) {
            alert("刪除成功 " + wsql_chat);
        }, function(tx, error) {
            alert('刪除失敗:' + error.message);
        });
    });
}
/**
 * 更新或者創建meessage
 * @param {Object} json
 * @param {Object} callback
 */
function websql_Message_SetItem(json, callback) {
    if(null == wsql_kv_db) {
        websqlOpenDB();
    }
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    websql_Message_GetItem(json.userid, json.fid, function(res) {
        if(res != null) {
            var setItemSQL = 'update ' + wsql_message + ' set nickname=? , head=? ,content= ?, time= ?,count=? where userid=? and fid=?';
            wsql_kv_db.transaction(function(ctx) {
                ctx.executeSql(setItemSQL, [json.nickname, json.head, json.content, json.time, json.count, json.userid, json.fid], function(ctx, result) {
                        callback(1)
                    },
                    function(tx, error) {
                        alert('error:更新出錯了');
                        callback(0);
                    });
            });
        } else {
            websql_InsertToMessage(json);
        }
    });

}

/**
 * 獲取一條message數據
 * 由於 websql 異步，只能用 回調函數
 * @param {Object} userid
 * @param {Object} fid
 * @param {Object} callback
 */
function websql_Message_GetItem(userid, fid, callback) {
    if(null == wsql_kv_db) {
        websqlOpenDB();
    }
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var selectSQL = 'SELECT * FROM ' + wsql_message + ' WHERE userid = ? and fid=?';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(selectSQL, [userid.toString(), fid.toString()], function(ctx, result) {
                var len = result.rows.length;
                if(len) {
                    callback(result.rows.item(0));
                } else {
                    callback(null);
                }
            },
            function(tx, error) {
                alert('error: websql_Message_getItem: 查詢失敗:\n' + error.message);
            });
    });

    // alert('here');
}

/**
 * 更新或者創建Chat
 * @param {Object} json
 * @param {Object} callback
 */
function websql_Chat_SetItem(json, callback) {
    if(null == wsql_kv_db) {
        websqlOpenDB();
    }
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    websql_Chat_GetItem(json.userid, json.fid, function(res) {
        if(res != null) {
            var setItemSQL = 'update ' + wsql_chat + ' set content=? ,time=? where userid=? and fid=?';
            wsql_kv_db.transaction(function(ctx) {
                ctx.executeSql(setItemSQL, [json.content, json.time, json.userid, json.fid], function(ctx, result) {
                        callback(1)
                    },
                    function(tx, error) {
                        alert('error:更新出錯了' + error.message);
                        callback(0);
                    });
            });
        } else {
            websql_InsertToChat(json);
        }
    });

}
/**
 * 獲取一條message數據
 * 由於 websql 異步，只能用 回調函數
 * @param {Object} userid
 * @param {Object} fid
 * @param {Object} callback
 */
function websql_Chat_GetItem(userid, fid, callback) {
    if(null == wsql_kv_db) {
        websqlOpenDB();
    }
    if(wsql_kv_db == null) {
        alert('error:數據庫未打開');
        return;
    }
    var selectSQL = 'SELECT * FROM ' + wsql_chat + ' WHERE userid = ? and fid=?';
    wsql_kv_db.transaction(function(ctx) {
        ctx.executeSql(selectSQL, [userid.toString(), fid.toString()], function(ctx, result) {
                var len = result.rows.length;
                if(len) {
                    callback(result.rows.item(0));
                } else {
                    callback(null);
                }
            },
            function(tx, error) {
                alert('error: 查詢失敗:\n' + error.message);
            });
    });

}

/**
 * //
// alert( ntNow() ); // [2008-01-29 17:15:28.046]
// 2008-01-29
// ntNow()
// ntNow( null, ntStrToDate('2012-01-31') ) // 此相當於 ntDateToStr
// ntNow( 'year' ) // 顯示 [2008年1月31日 18:05:07]
// ntNow( 'year,week' ) // 顯示 [2008年01月31日 18:05:07 周四]
// 即 function ntNow()
// ntNow('onlyNum') // [20120330235959012] // .substring(8, 15); // 2359590
// ntNow('onlyNum').substring(0,14) // 20110404155603 , 到秒 
 * @param {Object} flag
 * @param {Object} _date
 */
function ntNow(flag, _date) {
    var objD = new Date();
    if(_date != null)
        objD = _date;

    var dn, s;
    var hh = objD.getHours();
    var mm = objD.getMinutes();
    var ss = objD.getSeconds();

    //if(hh>12) { hh = hh-12; dn = '下午'; }
    //else dn = '上午';

    if(hh < 10) hh = '0' + hh;
    if(mm < 10) mm = '0' + mm;
    if(ss < 10) ss = '0' + ss;

    var _yy = objD.getFullYear();
    var _m = (objD.getMonth() + 1);
    var _mm = (objD.getMonth() + 1);
    if(_mm < 10) _mm = '0' + _mm;

    var _d = (objD.getDate());
    var _dd = (objD.getDate());
    if(_dd < 10) _dd = '0' + _dd;

    var _sss = '' + objD.getMilliseconds();
    while(_sss.length < 3)
        _sss = '0' + _sss;

    if(flag != null && flag.indexOf('year') >= 0)
        s = _yy + "年" + _m + "月" + _d + "日 " +
        hh + ":" + mm + ":" + ss;
    else if(flag != null && flag.indexOf('onlyNum') >= 0)
        s = _yy + "" + _mm + "" + _dd + "" +
        hh + "" + mm + "" + ss + "" + _sss;
    else
        s = _yy + "-" + _mm + "-" + _dd + " " +
        hh + ":" + mm + ":" + ss + "." + _sss;

    if(flag != null && flag.indexOf('week') >= 0) {
        // 顯示星期
        var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
        s += ' 周' + nStr1[objD.getDay()];
    }

    return s;
}