<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.7, maximum-scale=0.7">
<title>SQLITE 浏览器</title>
<style>
table {
*border-collapse: collapse;
/* IE7 and lower */
border-spacing: 0;
} .table {
border: solid #ccc 1px;
box-shadow: 0 1px 1px #ccc;
font-size: 12px;
font-family: Courier New, Courier, monospace;
} .table .highlight,
.table tr:hover {
background: #ddd;
} .table td,
.table th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 2px 5px;
text-align: left;
} .table th {
background-color: #dce9f9;
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
} .table td:first-child,
.table th:first-child {
border-left: none;
}
</style>
<script src="/js/jquery.min.js"></script> <script>
var db = null;
function openDb(dbName) {
dbName = dbName || 'db';
db = openDatabase(dbName, '1.0', 'ENH_sqlite DB', 200 * 1024 * 1024);
console.log(db);
} var isRun = false;
function runSql(sql) {
if (db == null) {
openDb();
if (db == null) return;
}
if (!sql) return;
if (isRun) return;
isRun = true; console.time('run');
db.transaction(function (tx) {
tx.executeSql(sql, [], function (tx, res) {
isRun = false;
console.timeEnd('run');
console.log(res);
if (res.rowsAffected > 0) {
$('#divInfo').css('color', '').html('影响' + res.rowsAffected + '行');
showTable([]);
}
else {
$('#divInfo').css('color', '').html('获取' + res.rows.length + '条数据');
showTable(res.rows);
}
}, function (tx, err) {
isRun = false;
console.timeEnd('run');
console.error(err);
$('#divInfo').css('color', 'red').html(err.message);
});
});
} function showTable(rows) {
$('#tbList thead').html('');
$('#tbList tbody').html('');
if (rows.length == 0) return; var tr = $('<tr></tr>');
for (var k in rows.item(0)) {
tr.append('<th>' + k + '</th>');
}
$('#tbList thead').append(tr); var html = '';
for (var i=0; i<rows.length; i++) {
var r = rows.item(i);
html += '<tr>';
for (var kk in r) {
html += '<td>' + htmlEncode(r[kk]) + '</td>';
}
html += '</tr>';
}
$('#tbList tbody').append(html);
} function htmlEncode(str) {
var ele = document.createElement('span');
ele.appendChild(document.createTextNode(str));
return ele.innerHTML;
}
function htmlDecode(str) {
var ele = document.createElement('span');
ele.innerHTML = str;
return ele.textContent;
} var id = 0;
function getGps() {
id++;
var gps = {
id: id,
car_no: 'RL0101',
lon: 108 + Math.random(),
lat: 34 + Math.random(),
deg: Math.round(Math.random() * 360),
last_id: id - 1,
data: '' + (1 + Math.random()) + ',100',
}; return gps;
} function addGpsList(list) {
if (!list) return; var key_list = [];
for (var key in list[0]) {
key_list.push(key);
} var gps_list = [];
for (var k in list) {
var val_list = [];
for (var kk in list[k]) {
val_list.push("'" + list[k][kk] + "'");
}
gps_list.push('(' + val_list.join(',') + ')')
} var sql = "INSERT INTO gps_list (" + key_list.join(',') + ") VALUES " + gps_list.join(',');
runSql(sql);
}
</script>
</head> <body style="line-height: 1.5;">
<h3 style="margin:5px 0;">JS sqlite 数据库操作</h3>
<ul style="font-size:12px; color:gray; padding-left:15px;">
<li>创建:CREATE TABLE IF NOT EXISTS LOGS (id unique, log)</li>
<li>插入:INSERT INTO LOGS (id, log) VALUES (1, "foobar")</li>
<li>查询:SELECT * FROM LOGS</li>
<li>删除:DELETE FROM LOGS WHERE id = 1</li>
<li>所有表:SELECT * FROM sqlite_master WHERE type="table";</li>
<li>删除表:DROP TABLE LOGS</li>
<li>类型:INTEGER,TEXT,REAL,NUMERIC</li>
</ul>
<input id="txtDbName" type="text" value="db" /> <input type="button" value="连接数据库" onclick="openDb($('#txtDbName').val());" /><br>
<input id="txtSql" type="text" value="SELECT * FROM LOGS" style="width:600px;" />
<input type="button" value="执行SQL" onclick="runSql($('#txtSql').val());" /><br>
<input type="button" value="创建GPS数据库" onclick="runSql('CREATE TABLE IF NOT EXISTS gps_list(id, car_no, lon NUMBER, lat NUMBER, deg NUMBER, last_id, data)');"
/>
<input type="button" value="添加GPS数据" onclick="addGpsList([getGps(), getGps()]);" />
<div id="divInfo"></div>
<table id="tbList" class="table">
<thead>
</thead>
<tbody>
</tbody>
</table>
</body> </html> <!--
常见GPS数据库
CREATE TABLE IF NOT EXISTS gps_list(id, car_no, lon NUMBER, lat NUMBER, deg NUMBER, last_id, data)
-->

js 操作本地sqlite的更多相关文章

  1. js操作本地文件

    只有IE支持js对本地文件操作 其他浏览器都不支持

  2. Electron中使用sql.js操作SQLite数据库

    推荐sql.js——一款纯js的sqlite工具. 一.关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite ...

  3. JS操作cookie以及本地存储(sessionStorage 和 localStorage )

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  4. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

  5. js -- 操作sqlite数据库

    最近看到一个使用js来操作sqlite数据库的,测试了一下,具体使用的是 js操作类: https://github.com/kripken/sql.js/(sqlite js 驱动) 异步请求:ht ...

  6. cordova调用本地SQLite数据库的方法

    第一篇技术博客,写下来和大家分享今天所学,其次自己也巩固一下. 整个下午的时间用来钻研如何用cordova调用移动端本地SQLite数据库.首先我并不是用eclipse来编程的,而是用cordova建 ...

  7. [荐]使用Js操作注册表

    使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...

  8. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  9. js 操作 cookie

    js 操作 cookie 的方法如下: //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.set ...

随机推荐

  1. Python爬去有道翻译

    注:传入的类型为POST类型,所以需要使用urllib.parse.urlencode(),将字典转换成URL可用参数: 使用json.loads(),将输出的json格式,转换为字典类型 impor ...

  2. .net基础学java系列(二)IDE

    上一篇文章.net基础学java系列(一)视野 废话: "视野"这篇文章,管理员说它比较空洞!也许初学者看不懂表格中的大部分内容!多年的neter估计也有很多不知道的! 有.net ...

  3. pytest(1)

    安装就讲这么多,别的不多比比 第1个例子(基本法要了解): 这个例子中,还有一些需要注意的知识点: 1 pytest将在当前目录及其子目录中运行test _ * .py或* _test.py形式的所有 ...

  4. md

    > 引用# 一级标题## 二级标题,总共六级标题 - ul + li + li 1. 1232. 456 [链接](http://www.baidu.com) ![图片](http://plac ...

  5. MyIbatis和Hibernate的区别--2019-04-26

    1.MyBatis 真正实现了java代码和sql的分离 2.Hibernate 是全自动的,MyBatis是半自动的 Hibernate实现了部分自动生成SQL 3.SQL优化上 MyBatis 强 ...

  6. linux学习之命令的排列、替换和别名--2019-04-23

    1.命令的排列 1)使用“;” 使用“;”命令时,不管命令1是否出错,接下来都执行命令2. 2)使用“&&” 使用“&&”命令时,只有命令1正确运行,接下来才会执行命令 ...

  7. iOS实现应用更新及强制更新

    调用更新接口返回字段: result =     {             descr = "";             isupdate = 1;//是否更新         ...

  8. 使用vue-awesome-swiper的相关问题

    最近自己在仿做一个旅游网站的vue项目,在首页中使用了vue-awesome-swiper插件来实现轮播图的效果,发现了以下几种问题: 一.需要额外引入swiper.css 原来使用vue-aweso ...

  9. 基于.net的Socket异步编程总结

    最近在为公司的分布式服务框架做支持异步调用的开发,这种新特性的上线需要进行各种严格的测试.在并发性能测试时,性能一直非常差,而且非常的不稳定.经过不断的分析调优,发现Socket通信和多线程异步回调存 ...

  10. vue Error: No PostCSS Config found in

    最近在做一个vue的移动端的项目,遇到一个问题,我本地的项目运行正常,可是上传到github上的一启动就报错,就是标题上的错误,找了很久,刚开始以为是某个css没有配置,就把本地的复制过去还是报错,无 ...