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. hihoCoder #1661 数组区间

    题目大意 给出 $1$ 到 $n$ 的一个排列($n\le 10^5$),记做 $a_1, a_2, \dots, a_n$ .(注:原题面表述为:"给定 $n$ 个互不相同且不超过 $n$ ...

  2. 【线性基】51nod1312 最大异或和&LOJ114 k大异或和

    1312 最大异或和 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题   有一个正整数数组S,S中有N个元素,这些元素分别是S[0] ...

  3. python数据结构元组与集合

    元组 1.()来定义 2.有序,同列表 3.元组一旦创建,不能被修改 注:元组的标识是逗号,不是括号 元组的定义 a = (1,2) type(a) <class 'tuple'> 元组的 ...

  4. 使用PropTypes进行类型检测

    PropTypes 是react提供的用于检验数据类型的typechecking,避免应用越来越大的时候出现意料之外的bug class Greeting extends React.Componen ...

  5. MySQL服务器端&客户端常见错误

    目录(?)[+] 客户端 服务器端 客户端 1.ERROR 2013 (HY000) at line 1: Lost connection to MySQL server during query 使 ...

  6. HDOJ 2222: Keywords Search

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  7. codeforce div2 426 D. The Bakery

    D. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  8. 【源码】List<T>泛型绑定repeater，以及repeater的交替绑定

    原文发布时间为:2009-10-28 -- 来源于本人的百度文章 [由搬家工具导入] 后台： using System;using System.Collections.Generic; public ...

  9. 页面get post等查看

    原文发布时间为:2010-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://www.fiddler2.com/Fiddler2/firstrun.asp

  10. 汉化CodeBlock

    codeblock最新版本发布了,但是对一些看不惯英文的来说,还是中文好点. 一.准备工作,先下载codeblock最新版,可以从官方下载,也可以从http://www.uzzf.com/soft/1 ...