本文介绍了在 JavaScript 中读写本地 SQLite 数据库的方法。首先分享了一个支持增删改查及链式查询的 JS 封装类，需注意运行环境需安装 SQLite ODBC 驱动。随后提供了一个在浏览器中直接操作 SQLite 的 Demo 示例，供开发者参考单机应用或离线场景下的数据持久化方案。
JavaScript 读写本地 SQLite 数据库
SQLite 作为一种单文件数据库，具有类型简单、功能强大且效率较高的特点，非常适合用于单机软件的开发场景。
这里分享一个此前编写的 JavaScript SQLite 数据库操作类。代码中已包含详细注释，该封装类支持增、删、改、查操作，并支持链式查询调用。使用时无需通过 new 关键字实例化对象。
/*sqlite数据库操作类 by sdxjwkq01*/
this.Db={
tableName:"",//表
whereReg:"",//where条件
orderReg:"",//排序条件
pageReg:"",//分页
dbUrl:"DRIVER=SQLite3 ODBC Driver;Database=Db/database.db",//数据库地址
//取得表
table:function(tableName){
this.tableName=tableName;
return this;
},
//取得where
where:function(whereReg){
this.whereReg=whereReg;
return this;
},
//排序
order:function(orderReg){
this.orderReg=orderReg;
return this;
},
//分页
page:function(pageReg){
this.pageReg=pageReg;
return this;
},
//添加
add:function(json){
var sql="insert into "+this.tableName+"(";
var fields=[];
var values=[];
for(var item in json){
fields.push(item);
values.push("'"+json[item]+"'");
}
sql+=fields.join(",");
sql+=") values("+values.join(",")+")";
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString =this.dbUrl;
con.Open();
con.Execute(sql);
con.Close();
},
//删除
del:function(id){
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString = this.dbUrl;
con.Open();
if(typeof id=="object"){
con.Execute("delete from "+this.tableName+" where id in ("+id.join(",")+")");
}else{
con.Execute("delete from "+this.tableName+" where id="+id);
}
con.Close();
},
//修改
upd:function(json){
var sql="update "+this.tableName+" set ";
var data=[];
for(var item in json){
data.push(item+"="+json[item]);
}
sql+=data.join(",");
if(this.whereReg.length>0){
sql+=" where "+this.whereReg;
}
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString =this.dbUrl;
con.Open();
var re=con.Execute(sql);
con.Close();
},
//查询
sel:function(){
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString =this.dbUrl;
con.Open();
var sql="";
sql+="select * from "+this.tableName;
if(this.whereReg.length>0){
sql+=" where "+this.whereReg;
}
if(this.orderReg.length>0){
sql+=" order by "+this.orderReg;
}
if(this.pageReg.length>0){
var limit=this.pageReg.split(",");
sql+=" limit "+limit[0]+" offset "+limit[1];
}
var result=con.Execute(sql);
var resultArray=[];
var h=0;
while(!result.eof){
if(h==0){
//试探指针位置
for(i=0;;i++){
try{
eval("var temp=result("+i+")");
}catch(e){
var fieldLength=i;
break;
}
}
h++;
}
var temp=[];
for(i=0;i<fieldLength;i++){
eval("temp.push(''+result("+i+"))");
}
resultArray.push(temp);
result.movenext();
}
con.Close();
return resultArray;
},
//直接执行
execute:function(sql){
var con = new ActiveXObject("ADODB.Connection");
con.ConnectionString =this.dbUrl;
con.Open();
var result=con.Execute(sql);
var resultArray=[];
var h=0;
while(!result.eof){
if(h==0){
//试探指针位置
for(i=0;;i++){
try{
eval("var temp=result("+i+")");
}catch(e){
var fieldLength=i;
break;
}
}
h++;
}
var temp=[];
for(i=0;i<fieldLength;i++){
eval("temp.push(''+result("+i+"))");
}
resultArray.push(temp);
result.movenext();
}
con.Close();
return resultArray;
}
}例如，以下代码展示了如何更新一条数据记录。
此外，也可以像下图所示那样，直接执行 SQL 语句。
运行此 SQLite 操作类时，计算机需安装 SQLite ODBC 驱动程序。非精简版的 Windows 系统通常已预装该驱动，因此这一步骤对于大多数用户而言可以忽略。
JavaScript 直接操作 SQLite 数据库的 Demo 演示
曾有朋友询问如何在浏览器端的 JavaScript 中直接操作 SQLite 数据库。
起初对此感到困惑，因为不清楚具体实现方式。
经过查阅相关资料后，最终完成了这个 Demo 示例。
在此进行记录，以备后续可能用到。
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<title>宇宙已无对手的Demo演示 --- 功能强非常之大的评分 + 数据存储Sqlite Demo演示</title>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
</head>
<body>
<div style="width:500px; margin:100px auto;">
<div class="demo">
<div style="padding-top: 20px;padding-bottom: 20px">主题：<input type="text" name="theme" id="theme"/></div>
<div style="padding-top: 20px;padding-bottom: 20px ">
<div id="starView"></div>
<div id="function-hint" class="hint">请选择评分</div>
</div>
<div style="padding-top: 20px ;padding-bottom: 20px">备注：<textarea id="remark" name="remark"></textarea></div>
<button id="save">保存</button>
<button id="read">读数据</button>
</div>
</div>
<div>
windows安装sqlite数据库教程：
<p>https://github.com/kripken/sql.js</p>
<p>http://www.runoob.com/sqlite/sqlite-installation.html</p>
<p>https://blog.csdn.net/chaishen10000/article/details/54574060</p>
<p>https://blog.csdn.net/u012562302/article/details/78362465</p>
星级评分：
<p>https://github.com/wbotelhos/raty</p>
<p>http://www.shouce.ren/example/try?pc=/api/jq/5733e33070c5a/index.html</p>
IE下使用Sqlite
<p>https://blog.csdn.net/fhl812432059/article/details/51502724</p>
</div>
<script type="text/javascript" src="./ie.js"></script>
</body>
</html>总结
以上为个人经验分享，希望能为大家提供参考，也希望大家多多支持本站。