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. upc组队赛2 Hakase and Nano【思维博弈】

    Hakase and Nano 题目描述 Hakase and Nano are playing an ancient pebble game (pebble is a kind of rock). ...

  2. Java方法覆盖教程

    重新定义来自超类(父类)继承的类中的实例方法称为方法覆盖. 示例 现在来看看,类A和类B的以下声明,覆盖了 print() 方法 : 1 2 3 4 5 6 7 8 9 10 11 public cl ...

  3. Cococs2d-x学习路线

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Cocos2D-X推荐书: Cocos2d-x权威指南

  4. Python django tests

    单元测试函数必须以test_开头,否则无法被识别

  5. Python面试题之“猴子补丁”（monkey patching）指的是什么？这种做法好吗？

    “猴子补丁”就是指,在函数或对象已经定义之后,再去改变它们的行为. 举个例子: import datetime datetime.datetime.now = lambda: datetime.dat ...

  6. 关于Oracle中Sort Merge Join的改写

    业务场景的问题,我们有一个刷CUBE的SQL,是Oracle环境,平时跑70多分钟, 但是最近突然不动了,这个SQL需要算累计值,比如年累计客户数量. 累计值是什么意思呢?我们使用下面的数据来说明问题 ...

  7. strings - 显示文件中的可打印字符

    总览 (SYNOPSIS) strings [-a|-|--all] [-f|--print-file-name] [-o] [--help] [-v|--version] [-n min-len|- ...

  8. 利用ARIMA算法建立短期预测模型

    周五福利日活动是电信为回馈老用户而做的活动,其主要回馈老用户的方式是让用户免费领取对应的优惠券,意在提升老用户的忠诚度和活跃度.今日,为保证仓库备货优惠券资源充足,特别是5元话费券等,需要对该类优惠券 ...

  9. Numpy_key_point

    Numpy使用中的一些注意点: ------------------------------------------------------------------------------------ ...

  10. Kirinriki

    Kirinriki 定义两个长度相等的字符串\(\{a_i\},\{b_i\}\)的距离为\(\sum_{i=1}^n|a_i-b_{n-i+1}|\)(其中n为字符串的长度),给出一个字符串\(\{ ...