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. 在响应式布局中，碰到图片不会自动缩放，因此需要一段js脚本

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...

  2. Mybatis中#{}与${}的使用

    含义 #{}:为占位符 ${}:为拼接符 区别: 用法 #{}:为参数占位符?,即sql预编译         ${}为字符串替换, 即字符串拼接 执行流程 #{}:动态解析 --> 预编译 - ...

  3. A 小G数数

    题目链接 题解: 此题可以直接暴力求解,(甚至可以四层循环 具体思想便是a[k]充当两种身份,同时判断两种不同情况,然后计数便可以了 /** /*@author victor /*language c ...

  4. 防止按钮重复点击的思路(js篇)

    最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id=</button> <script> btn.onclick = fun ...

  5. vue组件库的基本开发步骤（源代码）

    上次发布的随笔忘记提供源代码了,今天特地来补充,如果有什么问题,欢迎大家为我修改指正. vue.config.js文件: const path = require('path') function r ...

  6. Linux主机名的修改以及配置

    查询主机名: [root@localhost ~]# hostnamelocalhost.localdomain [root@localhost ~]# vim /etc/sysconfig/netw ...

  7. dubbo-源码阅读之Filter默认实现

    SPI配置的默认实现 cache=com.alibaba.dubbo.cache.filter.CacheFilter validation=com.alibaba.dubbo.validation. ...

  8. javac无效问题解决

    首先去下载JDK的最新版本,目前应该是1.7,具体下载地址可以百度去搜索下载 步骤阅读 2 下载时候要注意自己系统的版本,JDK分32位和64位版,根据自己系统版本下载. 步骤阅读 3 下载完后安装, ...

  9. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  10. git命令的基本使用

    git init 创建仓库 git status  查看当前版本库的状态 git add filename    使用git add命令告诉git,把该文件添加到仓库 git commit -m 'c ...