1.代码部分（可直接粘贴到html文件中运行）

<body onload="init()">

    姓名：<input type="text" id="name"><br>

    留言：<input type="text" id="memo"><br>

    <input type="button" value="保存" onclick="saveData()">

    <hr>

    <table id="datatable" border="1"></table>

    <p id="msg"></p>

    <script>

    var datatable = null;

    // C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases

    var db = openDatabase('MyData', '', 'my database', 2*1024*1024);

    // 初始化数据

    function init(){

        datatable = document.getElementById('datatable');

        showAllData();

    }

    // 展示一行数据

    function showData(row){

        var tr = document.createElement('tr');

        var td1 = document.createElement('td');

        td1.innerHTML = row.name;

        var td2 = document.createElement('td');

        td2.innerHTML = row.message;

        var td3 = document.createElement('td');

        var t = new Date();

        t.setTime(row.time);

        td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        datatable.appendChild(tr);

    }

    // 展示所有数据

    function showAllData(){

        db.transaction(function(tx){

            tx.executeSql('create table if not exists MyData(name TEXT,message TEXT, time INTEGER)',[]);

            tx.executeSql('select * from MyData',[],function(tx, rs){

                removeAllData();

                for(var i = 0; i < rs.rows.length; i++){

                    showData(rs.rows[i]);

                }

            })

        })

    }

    // 清空所有数据

    function removeAllData(){

        for(var i = datatable.childNodes.length - 1; i >= 0; i--){

            datatable.removeChild(datatable.childNodes[i]);

        }

        var tr = document.createElement('tr');

        var th1 = document.createElement('th');

        var th2 = document.createElement('th');

        var th3 = document.createElement('th');

        th1.innerHTML = '姓名';

        th2.innerHTML = '留言';

        th3.innerHTML = '时间';

        tr.appendChild(th1);

        tr.appendChild(th2);

        tr.appendChild(th3);

        datatable.appendChild(tr);

    }

    // 增加数据

    function addData(name, message, time){

        db.transaction(function(tx){

            tx.executeSql('insert into MyData values(?,?,?)',[name,message,time],

            function(tx, rs){

                console.log('成功保存数据！');

            },function(tx, error){

                console.log(error.source+"::"+error.message);

            })

        })

    }

    // 保存数据

    function saveData(){

        var name = document.getElementById('name').value;

        var memo = document.getElementById('memo').value;

        var time = new Date().getTime();

        addData(name,memo,time);

        showAllData();

    }

    </script>

</body>

2.查看对应数据库（此处使用了Navicat进行连接）

（1）首先找到对应sql文件

我本地Chrome是直接c盘安装，db文件目录是：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases

Databases.db是数据库的一些信息，

file__0目录下是代码中create的表数据。

然后使用Navicat连接：

该文件使用Navicat打开后，如下图：

接下来就可以继续进行其他操作了~

参考书籍：《HTML5与CSS3权威指南》8.2 本地数据库

参考文章：HTML5本地数据库（SQLite）示例

感谢

HTML5-SQLLite连接的更多相关文章

  1. 支持HTML5 SqlLite的AndroidApp

    简介: 想要建立一个支持HTML5的Android App; 这个HTML5的程序需要使用本地存储,特别是sqllite; 用eclipse创建了一个app,这个app默认在res/layout建了两 ...

  2. HTML5学习笔记<三>: HTML5样式, 连接和表格

    HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...

  3. Android IOS WebRTC 音视频开发总结（八十五）-- 使用WebRTC广播网络摄像头视频（下）

    本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...

  4. Guacamole之实现和架构（一）

    摘要 在网上看到一篇Guacamole官方手册的翻译,但是找不到后续,于是想自己也翻译几篇,有时间的话,会尽量多翻译一些.第一篇就直接转载过来了. Guacamole的介绍以及架构 Guacamole ...

  5. Guacamole 介绍

    Guacamole 介绍以及架构   目前在从事一些虚拟化解决方案方面的工作,最近项目有需求,希望能在浏览器上远程操作虚拟机. 此时发现了Guacamole,一个提供远程桌面的解决方案的开源项目,通过 ...

  6. 第1阶段冲刺成果—简单运算game（APP）

    第1阶段冲刺成果 由于我们团队都没有Android的基础,所以在这一块花了很长的时间去学习探索,就连简单的Android的电脑配置也花了很长的时间,所以其他的DONE的都没有完成,这是失败的地方.但是 ...

  7. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  8. 老雷socket编程之认识常用协议

    老雷socket编程之常见网络协议 1.ip IP协议是将多个包交换网络连接起来,它在源地址和目的地址之间传送一种称之为数据包的东西, 它还提供对数据大小的重新组装功能,以适应不同网络对包大小的要求. ...

  9. 【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP

    目录结构: // contents structure [-] 关于SSE的一些话 什么是SSE SSE的浏览器支持情况 SSE的工作机制 使用SSE连接JSP文件 HTMl页面 服务器端 错误 错误 ...

  10. 学习html5的WebSocket连接

    1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...

随机推荐

  1. 普通平衡树（指针splay）

    最早的板子,学自Ez大佬: #include<cstdio> #include<cstdlib> using namespace std; class Splay{ publi ...

  2. Windows系统——后缀为.zip.00X的zip分卷解压

    Windows下后缀为*.zip.001文件的解压方法: 后缀为*.zip.001文件用winrar无法解压, 解决办法是在windows下打开命令行界面, 输入:copy /B xx.zip.001 ...

  3. php合并图片

    <?php class image{ /** * @param string $backgroundImage 背景图 * @param string $smallImage 小图 * @par ...

  4. 开启dns服务时，/etc/init.d/named start 卡住了的解决办法。

    在命令行输入 rndc-confgen -r /dev/urandom -a  再次开启服务 /etc/init.d/named  start ok

  5. jquery 获取 checkbox 的 checked 状态问题

    这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结... 事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说 ...

  6. JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证

    目录:  typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...

  7. 运输问题2（cogs 12）

    [问题描述]     一个工厂每天生产若干商品,需运输到销售部门进行销售.从产地到销地要经过某些城镇,有不同的路线可以行走,每条两城镇间的公路都有一定的流量限制.为了保证公路的运营效率,每条公路都有一 ...

  8. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛部分题解

    A 跳台阶 思路:其实很简单,不过当时直接dp来做了 AC代码: #define _CRT_SECURE_NO_DEPRECATE #include<iostream> #include& ...

  9. *UOJ#223. 【NOI2016】国王饮水记

    $n \leq 8000$的数列,问不超过$m \leq 1e9$次操作后第一个数字最大是多少.操作:选一些数,把他们变成他们的平均值.需要保留$p \leq 3000$位小数,提供了一个小数高精度库 ...

  10. springBoot 数组增加工具类包

    1.pom中加入依赖 <!--数组工具类 start--> <dependency> <groupId>org.apache.commons</groupId ...