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. [SCOI2011][bzoj2331] 地板 [插头dp]

    题面: 传送门 思路: 插头dp基础教程 这个L形......第一眼看上去真的是丧病啊 但是仔细想想,实际上也就是拿一堆路径铺满一个棋盘,这个路径还是有限制的 那还有什么好说的,插头dp上啊[雾] 首 ...

  2. BZOJ 3897: Power

    3897: Power Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 218  Solved: 83[Submit][Status][Discuss] ...

  3. KMP--君住长江头，我住长江尾，日日思君不见君，共饮长江水

    POJ 3461: Oulipo 题意: 求出第一个串在第二个串中的出现次数... 分析: KMP板子题... 代码: #include<algorithm> #include<io ...

  4. HDU4305 Lightning

    There are N robots standing on the ground (Don't know why. Don't know how). Suddenly the sky turns i ...

  5. 【CF1073A】Diverse Substring（签到）

    题意:给定一个由小写字母组成的串,要求找出一个子串使得其中出现最多的字母不超过它长度的一半下取整 n<=1e3 思路: #include<cstdio> #include<cs ...

  6. Spring Boot学习——Controller的使用

    本文主要记录几个注释的使用方法. 1. @Controller : 处理http请求 2. @RequestMapping : 配置URL映射 3. @RestController : 组合注解,sp ...

  7. 转载：html+js实现只允许输入两位小数的输入框

    JS代码: <script language="JavaScript" type="text/javascript"> function clear ...

  8. POJ3086 Treats for the Cows(区间DP)

    题目链接  Treats for the Cows 直接区间DP就好了,用记忆化搜索是很方便的. #include <cstdio> #include <cstring> #i ...

  9. [Machine Learning with Python] Cross Validation and Grid Search: An Example of KNN

    Train model: from sklearn.model_selection import GridSearchCV param_grid = [ # try 6 (3×2) combinati ...

  10. Go语言调度器之主动调度(20)

    本文是<Go语言调度器源代码情景分析>系列的第20篇,也是第五章<主动调度>的第1小节. Goroutine的主动调度是指当前正在运行的goroutine通过直接调用runti ...