<!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. zabbix4.0添加磁盘io监控

    agent服务器端的操作 1.设置zabbix-agent端的配置文件 找到agent端配置文件的位置,本例agent端的配置文件路径在/usr/local/etc/zabbix下 首先:在主配置文件 ...

  2. 爬虫-request和BeautifulSoup模块

    requests简介 Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工 ...

  3. 简单测试Elasticsearch 7.0

    发现不同的地方 1.创建index  (注意:7.0版本之前mappings中需要增加_doc,7.0版之后已去掉) PUT http://10.10.x.x:9200/test 2.Elastics ...

  4. html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

  5. python默认参数陷阱

    对于学习python的人都有这样的困惑 def foo(a=[]): a.append(5) return a Python新手希望这个函数总是返回一个只包含一个元素的列表:[5].结果却非常不同,而 ...

  6. TextBox使用技巧--转载

    [转载出处注明:http://tieba.baidu.com/p/3677706825] 在使用Visual Basic开发应用程序时,TextBox控件是最常用的(特别对于数据库程序),以下是笔者在 ...

  7. Linux环境下vi/vim编辑器常用命令

    使用vi文本编辑器 配置文件是Linux系统中的显著特征之一,其作用有点类似于Windows系统中的注册表,只不过注册表是集中管理,而配置文件采用了分散的自由管理方式.那么如何使用Linux字符操作界 ...

  8. numpy库补充 mean函数应用

    mean()函数功能:求取均值经常操作的参数为axis,以m * n矩阵举例: axis 不设置值,对 m*n 个数求均值,返回一个实数 axis = 0:压缩行,对各列求均值,返回 1* n 矩阵 ...

  9. 计蒜客 等边三角形 dfs

    题目: https://www.jisuanke.com/course/2291/182238 思路: 1.dfs(int a,int b,int c,int index)//a,b,c三条边的边长, ...

  10. UWB DWM1000 跟随小车原理---一张图演示

    更多内容参考论坛:bphero.com.cn