js 直接操作sqlite数据库demo
朋友问我浏览器js直接sqlite怎么做。。。？
我一脸的懵逼。。。啥是sqlite。。。。？
然后各种查资料。。。终于有了这个demo。。。。
记录下，后面可能用的到。。。。。
宇宙已无对手的Demo演示 --- 功能强非常之大的评分 + 数据存储Sqlite Demo演示
主题：
请选择评分
备注：
windows安装sqlite数据库教程：
https://github.com/kripken/sql.js
http://www.runoob.com/sqlite/sqlite-installation.html
https://blog.csdn.net/chaishen10000/article/details/54574060
https://blog.csdn.net/u012562302/article/details/78362465
星级评分：
https://github.com/wbotelhos/raty
http://www.shouce.ren/example/try?pc=/api/jq/5733e33070c5a/index.html
IE下使用Sqlite
https://blog.csdn.net/fhl812432059/article/details/51502724
ie.js
$(function () {
function dbConnect(dbFile) {
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString = "DRIVER=SQLite3 ODBC Driver;Database=" + dbFile;
con.Open();
return con;
}
var db = dbConnect("./test");
// getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
var begin = new Date().getTime();
$('#starView').raty({
number: 5,//多少个星星设置
targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
path: 'lib/raty/images',
hints: ['差', '一般', '好', '非常好', '全五星'],
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png',
size: 24,
starHalf: 'star-half.png',
starOff: 'star-off.png',
starOn: 'star-on.png',
target: '#function-hint',
cancel: false,
targetKeep: true,
targetText: '请选择评分',
precision: false,//是否包含小数
// score: 该字段是插件自带的一个hidden标签，name=score，如果不想用的话，可以自己配置click
click: function () {
}
});
$("#read").click(function () {
//查找数据
var objRs = db.Execute("SELECT * FROM test");
var rows = [];
while (!objRs.eof) {
var row = {};
for (var i = 0; i < objRs.fields.count; i++) {
var field = objRs.fields(i);
row[field.name] = field.value;
}
rows.push(row);
objRs.movenext();
}
console.log("共计：" + rows.length + "条数据")
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
console.log(row)
}
});
$("#save").click(function () {
var field = {};
$(".demo input,textarea").each(function () {
field[this.name] = '' + this.value;
});
field['begin'] = begin;
field['end'] = new Date().getTime();
// 计算开始时间和结束时间的毫秒差
field['time'] = field.end - field.begin;
console.log(field);
// 保证列的顺序和value的顺序是一致的
var columns = ['theme', 'score', 'remark', 'begin', 'end', 'time'],
values = [];
$(columns).each(function (idx, key) {
var v = field[key]
if (typeof(v) === "string") {
values.push("'" + v + "'");
} else {
values.push(v);
}
});
console.log(values);
// IE 特别之处
db.Execute("CREATE TABLE IF NOT EXISTS test (theme TEXT, score INTEGER, remark TEXT, begin INTEGER ,end INTEGER,time INTEGER);");
var insert = 'INSERT INTO test(theme, score, remark, begin,end,time) VALUES(' + values.join(",") + ')';
db.Execute(insert);
});
});chorme.js
$(function () {
var db = window.openDatabase("./test", "1.0", "PhoneGap Demo", 200000);
if (!window.FileReader) {
alert("Not supported by your browser!");
return false;
}
// getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
var begin = new Date().getTime();
$('#starView').raty({
number: 5,//多少个星星设置
targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
path: 'lib/raty/images',
hints: ['差', '一般', '好', '非常好', '全五星'],
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png',
size: 24,
starHalf: 'star-half.png',
starOff: 'star-off.png',
starOn: 'star-on.png',
target: '#function-hint',
cancel: false,
targetKeep: true,
targetText: '请选择评分',
precision: false,//是否包含小数
// score: 该字段是插件自带的一个hidden标签，name=score，如果不想用的话，可以自己配置click
click: function () {
}
});
$("#read").click(function () {
//查找数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM test', [], function (tx, results) {
var rows = results.rows;
console.log("共计：" + rows.length + "条数据")
for (let i = 0; i < rows.length; i++) {
var row = rows[i];
console.log(row)
}
}, null);
});
});
$("#save").click(function () {
var field = {};
$(".demo input,textarea").each(function () {
field[this.name] = '' + this.value;
});
field['begin'] = begin;
field['end'] = new Date().getTime();
// 计算开始时间和结束时间的毫秒差
field['time'] = field.end - field.begin;
console.log(field);
// 保证列的顺序和value的顺序是一致的
var columns = ['theme', 'score', 'remark', 'begin', 'end', 'time'],
values = [];
$(columns).each(function (idx, key) {
var v = field[key]
if (typeof(v) === "string") {
values.push("'" + v + "'");
} else {
values.push(v);
}
});
/*
columns.forEach(key => {
const v = field[key]
if (typeof(v) === "string") {
values.push("'" + v + "'");
} else {
values.push(v);
}
});
*/
console.log(values);
db.transaction(populateDB, errorCB, successCB);
// 填充数据库
function populateDB(tx) {
// tx.executeSql('DROP TABLE IF EXISTS test;');
tx.executeSql("CREATE TABLE IF NOT EXISTS test (theme TEXT, score INTEGER, remark TEXT, begin INTEGER ,end INTEGER,time INTEGER);");
const insert = 'INSERT INTO test(theme, score, remark, begin,end,time) VALUES(' + values.join(",") + ')';
console.log(insert)
tx.executeSql(insert);
console.log("insert ok")
}
// 事务执行出错后调用的回调函数
function errorCB(err) {
console.log("Error processing SQL: ", err);
}
// 事务执行成功后调用的回调函数
function successCB() {
console.log("success!");
}
//
// var data = db.export();
//
// var arraybuff = data.buffer;
//
// var blob = new Blob([arraybuff]);
//
// var url = window.URL.createObjectURL(blob);
//
});
});