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

時間  2019-12-10
標籤 htm5 htm 本地 存儲 方案 websql 封裝 欄目 軟件設計 简体版
原文   原文鏈接

1、websql 簡介

  在HTML5中，大大豐富了客戶端本地能夠存儲的內容，添加了不少功能來將本來必須保存在服務器上的數據轉爲保存在客戶端本地，從而大大提升了Web應用程序的性能，減輕了服務器端的負擔，使Web時代從新回到了「客戶端爲重，服務器爲輕」的時代。
在這其中，一項很是重要的功能就是數據庫的本地存儲功能。在HTML5中內置了一個能夠經過SQL語言來訪問的數據庫。在HTML4中，數據庫只能放在服務器端，只能經過服務器來訪問數據庫，可是在HTML5中，能夠就像訪問本地文件那樣輕鬆的對內置的數據庫進行直接訪問。如今，像這種不須要存儲在服務器上的，被稱爲「SQLite」的文件型SQL數據庫已經獲得了很普遍的利用，因此HTML5中也採用了這種數據庫來做爲本地數據庫。
  百度來的，websql已經中止更新了，不過仍是能夠用用。

2、不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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程