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;
}