<!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. P4098 [HEOI2013]ALO

    最近这个家伙去哪了,为啥一直不更博客了呢?原来他被老师逼迫去补了一周的文化课,以至于不会把班里的平均分拉掉太多.好了,我们来看下面这道题目: P4098 [HEOI2013]ALO 题目描述 Welc ...

  2. MySQL高可用之MHA的搭建

    MySQL MHA架构介绍: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Face ...

  3. 基于keil平台下STM32L系列移植FreeRTOS操作系统

    1,下载FreeRTOS https://www.freertos.org/a00104.html 点击下载后,会进入如下界面 之后会弹出下载界面,格式为.EXE,不用怀疑.不是木马. 等待下载完成, ...

  4. Selenium WebDriver的实现及工作原理

    笔者最近研究学习了selenium的实现和工作原理,阅读了selenium3.141.59的Java源码,没有读完哈...重点从两个接口(org.openqa.selenium.WebDriver和o ...

  5. Node js redis

    const redis = require('redis');//redis , '172.16.4.2'); //redis操作 client.set("hello", &quo ...

  6. 前端axios下载excel无法获取header所有字段问题

    后端设置header后,前端无法获取到其他字段,只需要在服务器端header里面设置 Access-Control-Expose-Headers: Content-Disposition

  7. Python-模块，以及使用文本中的数据

    模块导入: from math import pi as math_pi print math_pi     #相当于把pi取了个别名 # -*- coding: cp936 -*-from rand ...

  8. [Tips]vim设置

    临时设置 在vim中输入 :set nu! 若显示行号时,它的功能时取消行号:若不显示行号时,它的功能是显示行号. 固定设置 在~/.vimrc中进行设置. 添加注释: 双引号是注释 ” this i ...

  9. IntelliJ IDEA：创建Java Web工程

  10. A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header

    使用arduino烧写esp32模块遇到的无法烧录问题,时钟无法烧录遇到如下提示 后来搜索在如下连接找到解决方法: https://github.com/espressif/esptool/issue ...