html5内置了2种本地数据库，一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库。二是被称为“indexedDB” 的NoSQL类型的数据库

这篇主要讲SQLLite

在js中使用SQLLite数据库，分两个步骤

一、创建访问数据库

　　使用openDatabase方法创建

var db = openDatabase('mybd',1.0,"testDB",2*1024*1024)

　　 该方法创建一个访问数据库对象，该方法有4个参数

　　第一个参数：数据库名

　　第二个参数：版本号

　　第三个参数：数据库描述

　　第四个参数：数据库大小

二、使用事务处理

　　使用transaction方法执行事务处理， 该方法使用一个回调函数作为参数

db.transaction(function(tx) {

    tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)', [name, message, time],

        function(tx, rs) {

            alert("成功保存数据!");

        },

	function(tx, error) {

    	    alert(error.source + "::" + error.message);

	});

});

executeSql方法有4个参数

第一个参数：需要执行的SQL语句

第二个参数：SQL语句中所有使用到的参数数组。在这个方法中，sql语句的参数用“？”代替，然后将参数组成数组放到第二个参数中

第三个参数：执行sql语句成功调用的回调函数

第四个语句：执行sql语句失败调用的回调函数

查看示例：使用SQLLite实现web留言本

 <!DOCTYPE html>

 <head>

     <meta charset="UTF-8">

     <title>使用数据库实现Web留言本</title>

     <script type="text/javascript">

         //打开数据库

         var datatable = null;

         var db = openDatabase('MyData', '', 'My Database', 102400);

         //初始化

         function init() {

             datatable = document.getElementById("datatable");

             showAllData();

         }

         //擦除表格中当前显示的数据

         function removeAllData() {

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

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

             }

             var c = "";

             c += "<tr>";

             c += "<td>姓名</td>";

             c += "<td>留言</td>";

             c += "<td>留言时间</td>";

             c += "</tr>";

             datatable.innerHTML = c;

         }

         //显示数据

         function showData(row) {

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

             var t = new Date();

             t.setTime(row.time);

             var c = "";

             c += "<td>"+  row.name +"</td>";

             c += "<td>"+  row.message +"</td>";

             c += "<td>"+  t.toLocaleDateString() + " " + t.toLocaleTimeString(); +"</td>";

             tr.innerHTML = c

             datatable.appendChild(tr);

         }

         //显示全部数据

         function showAllData() {

             //执行事务处理

             db.transaction(function(tx) {

                 //用回调函数来访问数据库

                 tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)', []);

                 tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs) {

                     removeAllData();

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

                         showData(rs.rows.item(i));

                     }

                 });

             });

         }

         //添加数据

         function addData(name, message, time) {

             db.transaction(function(tx) {

                 tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)', [name, message, time], function(tx, rs) {

                         alert("成功保存数据!");

                     },

                     function(tx, error) {

                         alert(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>

 </head>

 <body onload="init();">

     <h1>使用数据库实现Web留言本</h1>

     <table>

         <tr>

             <td>姓名:</td>

             <td><input type="text" id="name"></td>

         </tr>

         <tr>

             <td>留言:</td>

             <td><input type="text" id="memo"></td>

         </tr>

         <tr>

             <td></td>

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

         </tr>

     </table>

     <hr>

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

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

 </body>

 </html>

html5本地存储（二）--- SQLList的更多相关文章

  1. HTML5本地存储——IndexedDB二：索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  2. HTML5本地存储——IndexedDB（二：索引）

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  3. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  4. (转)HTML5 本地存储

    原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...

  5. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  6. HTML5 本地存储形式

    1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 we ...

  7. HTML5 本地存储 [转]

    1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 we ...

  8. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  9. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  10. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

随机推荐

  1. #include和前置声明(forward declaration)

    #include和前置声明(forward declaration) 1.    当不需要调用类的实现时,包括constructor,copy constructor,assignment opera ...

  2. 微信小程序 获取用户信息并保存登录状态

    微信小程序 获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml

  3. [已解决]报错: Version in docker-compose is unsupported

    docker compose将解析版本为"2",而不是"3.3".应该改为: version: "2"

  4. linux下vnstat查看服务器带宽流量统计

      因为很多vps或者服务器都是限流量的,但是又很多服务商并没有提供详细的流量表,比如每天的流量表,所以肯定有人很想知道自己服务器到底跑了多少流量. vnstat就是一个很好用的服务器流量统计命令.我 ...

  5. Windows Nginx 教程

    1. 下载Nginx: Nginx下载 (官方网站) 作者使用版本  Stable version  nginx/Windows-1.12.0

  6. Pyhton第八节 字典补充

    Python 字典的基本元素是键值对(key-value), 每个键值对的key和value之间用:分割:每个键值对之间用,分割:整个键值对用花括号{}包围 字典内的键(key)必须唯一,值不需要唯一 ...

  7. Alpha版本后的心得体会

    Alpha版本后的心得体会 在我们一系列的努力之下,我们团队打造的校园互助式快递代取APP——U-Help的α版本终于能够问世了.尽管这个版本存在着这样那样的问题,但是我们还是对此抱有充足的信心.另一 ...

  8. Java 多态基础

    多态的定义 程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在运行期间才确定. 或者是同一个行为具有多个不同表现形式或形态的能力. 多态的体现 在玩LOL时,W ...

  9. windows server 2016 支持多用户远程登录

    服务器设置多用户同时远程桌面,可以提高访问效率,避免人多抢登服务器. 1. 首先需要先安装远程桌面服务  配置组策略,运行框输入gpedit.msc,打开计算机配置–>管理模板—>wind ...

  10. Comet OJ - contest #3 C DP

    题意:给你一个长度为n序列,和一个数m,问这个序列有多少个子序列,满足这个子序列的所有子序列的和是m的倍数?答案对1e9 + 7取模,n, m范围到5e3; 思路:容易发现,如果一个子序列的长度是n, ...