<!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. C# 高级编程02----手动创建C#程序

    在日常工作中使用C# 开发的时候,通常使用宇宙第一神器VS进行开发.为了了解编译过程,这里采用文本编辑器的方式编写一个C#程序 一.创建一个C#程序 1.使用记事本工具创建一个名为First.cs的文 ...

  2. wx:for获取 data-xxx 自定义的属性

    今天在写wx:for循环时,在事件对象上e.target.dataset上一直拿不到自定义属性 data-id. 示例: <view wx:for='{{list}}' wx:key='{{it ...

  3. 微信H5支付开发(maven仓库版）

    官方文档:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 开发之前确认开通了H5支付功能 一.安装微信sdk 二.创建config ...

  4. BFC知识点概括与总结

    什么是BFC?如何生成一个BFC?BFC有什么作用? 一:什么是BFC? 首先了解CSS中两个概念:box和formatting context. Box:CSS布局中的基本单位.一个页面由多个box ...

  5. The type javax.servlet.http.HttpServletResponse cannot be resolved. It is indirectly referenced from required .class files

    The type javax.servlet.http.HttpServletResponse cannot be resolved. It is indirectly referenced from ...

  6. 用Python建立连接直接读取与更改Rockwell Control Logix Controller的tag值

    请参考如下连接的开源项目 源代码在本地测试好用. 注: 这里所用的Python 版本是 2.7.11 https://github.com/dmroeder/pylogix

  7. LOJ#3043.【ZJOI2019】 线段树 线段树,概率期望

    原文链接www.cnblogs.com/zhouzhendong/p/ZJOI2019Day1T2.html 前言 在LOJ交了一下我的代码,发现它比选手机快将近 4 倍. 题解 对于线段树上每一个节 ...

  8. UOJ#374. 【ZJOI2018】历史 贪心,LCT

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ374.html 题解 想出正解有点小激动. 不过因为傻逼错误调到自闭.不如贺题 首先我们考虑如何 $O(n ...

  9. flink学习

    flink介绍: Apache Flink is an open source platform for distributed stream and batch data processing. F ...

  10. Chrome 无法自动填充密码

    问题: chrome 同步一切正常,在密码管理器https://passwords.google.com 也能看到自己保存的密码 但是在 设置 - 密码中看不到保存的密码,只能看到 “一律不保存” 的 ...