<!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. 使用HDFS完成wordcount词频统计

    任务需求 统计HDFS上文件的wordcount,并将统计结果输出到HDFS 功能拆解 读取HDFS文件 业务处理(词频统计) 缓存处理结果 将结果输出到HDFS 数据准备 事先往HDFS上传需要进行 ...

  2. BeanUtils.copyProperties缓解代码压力，释放双手

    简单描述:之前在写代码的时候,经常把表单提交到后台的对象的参数,通过getter方法取出来,然后,再通过setter方法传递给需要的对象,代码中写了很多get set这种方法,后来听同事说,sprin ...

  3. Niagara帮助文档资料整理

    1.任何软件额发布都会有说明文档,有的不会附具体实践的操作步骤,存在不懂得问题一般可以通过查看榜文文档解决问题 一些软件的帮助文档是一PDF格式存储在软件安装的目录下面,如Niagar workben ...

  4. mysql 函数学习(常用)

    1.时间函数(组1) SELECT CURRENT_DATE() AS date, CURRENT_TIME() AS `time`, CURRENT_TIMESTAMP() AS `timestam ...

  5. dataGridView笔记

    最近用dataGridView比较多,先把代码备份在这里,有时间系统总结一下 using FindId.DAL; using FindId.Model; using System; using Sys ...

  6. win10家庭版升级为专业版（win10专业版激活方法）

    替换专业版密钥 1.在win10家庭版桌面上鼠标右键点击[此电脑]-[属性],点击右下角的[更改产品密钥] 2.也可以点击开始-设置-更新和安全-激活-[更改产品密钥] 3.输入要升级的win10版本 ...

  7. Ubuntu16.04安装编译caffe以及一些问题记录

    前期准备: 最好是python虚拟环境 [anaconda的创建虚拟环境] 创建 conda create -n caffeEnv(虚拟环境名字) python=3.6 激活环境 source act ...

  8. sqlserver给用户配置存储过程查看权限

    对应的数据库->安全性->用户名右键属性-->安全对象-->指定所有对象-->选择服务器,里边有一个 查看定义(view any definition) 选项,勾上.

  9. this指向及改变this指向的方法

    一.函数的调用方式决定了 this 的指向不同,但总的原则,this指的是调用函数的那个对象: 1.普通函数调用,此时 this 指向 全局对象window function fn() { conso ...

  10. Python3.2.3官方文档（中文版）

    所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/66/ 来源:python黑洞网,专注 ...