<!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. git 提示error setting certificate verify locations 解决方案

    问题:使用git extension 拉取或者push代码,提示 "C:\Program Files\Git\bin\git.exe" pull --progress " ...

  2. Entitas Learning Document

    Entitas Learning Document You can find Entitas project in there Entitas for Unity Github There are a ...

  3. 为什么Kafka速度那么快

    Kafka的消息是保存或缓存在磁盘上的,一般认为在磁盘上读写数据是会降低性能的,因为寻址会比较消耗时间,但是实际上,Kafka的特性之一就是高吞吐率. 即使是普通的服务器,Kafka也可以轻松支持每秒 ...

  4. python3 代理设置

    前言: 用过很多种代理使用方式,这里总结一下. 1.urllib+socks5的代理1 from sockshandler import SocksiPyHandler import socks fr ...

  5. Bicoloring 二分图+染色

    https://vjudge.net/contest/281085?tdsourcetag=s_pcqq_aiomsg#problem/B #include<stdio.h> #inclu ...

  6. Angular6 用户自定义标签开发

    参考地址:https://www.jianshu.com/p/55e503fd8307

  7. 《团队作业》五小福团队作业--UNO-- LandingDay--降落

    <团队作业>五小福团队作业--UNO-- LandingDay--降落 写在前面 几周的飞行之后,降落之日也如期而至了.在2018年12月19日我们顺利地完成了项目的总结汇报.但是,短暂的 ...

  8. Burnside引理和Polya定理之间的联系

    最近,研究了两天的Burnside引理和Polya定理之间的联系,百思不得其解,然后直到遇到下面的问题: 对颜色限制的染色 例:对正五边形的三个顶点着红色,对其余的两个顶点着蓝色,问有多少种非等价的着 ...

  9. 六、OpenStack—neutron组件介绍与安装

    一.neutron介绍 Neutron 概述:传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要创建.修 ...

  10. 英语口语练习系列-C41-食物词汇-鹊桥仙

    词汇 1, rice [raɪs] n. 稻:米饭 vt. 把-捣成米糊状 Rice: 米饭 | 大米 | 稻 2, bread [bred] n. 面包:生计 vt. 在-上洒面包屑 Bread: ...