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. 设置 Quartus II 的仿真时间大于 1us

    Quartus II 仿真的默认时长是 1us. 设置时钟时看到 End time 想修改时长,把默认的 1us 改成 10us. 然后提示 End time 不合法.(只能设置为 0 到 1us) ...

  2. Vue.js实现一个SPA登录页面的过程【推荐】

    地址:https://www.jb51.net/article/112550.htm vue路由跳转时判断用户是否登录功能的实现 地址:https://www.jb51.net/article/126 ...

  3. MySQL修改数据库root密码方法

    方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass ...

  4. mysql 5.7.20 动态sql 传入参数

    drop procedure test; delimiter ;; CREATE procedure test() -- 取动态sql的值 -- 目前只测试出,在 where 后面, 可以用 ?,类似 ...

  5. docker--image的获取

    image有几种获取方式: 1.Docker官方提供了一种文件格式:Dockerfile,通过这种格式的文件,我们可以定义一个image,然后通过Dockerfile我们可以构建(build)一个im ...

  6. arcpy-字段唯一值、重复值、最值、平均值、方差、标准差、中数、众数

    插个广告,制作ArcGIS的Tool工具学习下面的教程就对了: 零基础学习Python制作ArcGIS自定义工具观看链接 <零基础学习Python制作ArcGIS自定义工具>课程简介 im ...

  7. css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  8. 关于STLINK

    关于STLINK 1.STLIN固件升级 1)打开ST-LINK Utility,选择ST-LINK->Firmware update 2)连接ST-LINK 3)可以看到STLINK当前的软件 ...

  9. 【hihoCoder】每周一题（从week 220开始）

    2018/9/17-2018/9/23  week 220 push button I 题目链接:https://hihocoder.com/contest/hiho220/problem/1 有N个 ...

  10. C++子类的构造函数后面加:冒号的作用（转）

    在C++类的构造函数中经常会看到如下格式的写法: MyWindow::MyWindow(QWidget* parent , Qt::WindowFlags flag) : QMainWindow(pa ...