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. 中国HBase技术社区第一届Meetup资料大合集

    2018年6月6号,由中国HBase技术社区组织,阿里云主办的中国第一次HBase Meetup在北京望京阿里中心举行,来自阿里.小米.滴滴.360等公司的各位HBase的PMC.committer共 ...

  2. Pandas DataFrame操作

    DataFrame的创建 >>> import pandas as pd >>> from pandas import DataFrame #define a di ...

  3. Linux（三）—— 项目部署环境搭建

    目录 项目部署环境搭建 一.linux上网 二.rpm包管理 1.光盘挂载 2.安装卸载rpm包 3.查询是否安装 4.查看软件包 5.互相依赖关系的软件包 三.yum包管理 1.使用aliyun的y ...

  4. Git操作思维导图

    转自:https://blog.csdn.net/mynameishuangshuai/article/details/51657324

  5. gitlab+gitlab-ci+docker自动化部署

    导言 本次测试用的是gitlab-ci,单纯与gitlab搭配而言,gitlab-ci较jenkins更加一体,顺畅. 主机1:192.168.100.151 gitlab 主机2:192.168.1 ...

  6. 【Linux】- CentOS7安装java运行环境

    centos7中安装java环境,在安装前先查看有无安装过java环境.直接运行java命令,会提示命令未找到,则是没有安装过java环境. 1.检查 也可以通过rpm命令查看: rpm -qa |g ...

  7. FrameWork内核解析之布局加载与资源系统（三）

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680本篇文章将继续从以下两个内容来介绍布局加载与资源系统: [ LayoutM ...

  8. Android组件内核之组件间通信方案（四）上篇

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下三个内容来介绍通信方案: [Activity与Fragm ...

  9. python-函数-动态传参,作用域的问题,函数嵌套,global nonlocal

    ⼀. 函数参数--动态传参 之前我们说过了传参, 如果我们需要给⼀个函数传参, ⽽参数⼜是不确定的. 或者我给⼀个 函数传很多参数, 我的形参就要写很多, 很⿇烦, 怎么办呢. 我们可以考虑使⽤动态参 ...

  10. java web session共享

    一 搭建环境 操作系统:windows 7 64位 http server:nginx 1.9.7 缓存系统:memcached Servlet容器:apache-tomcat-7.0.65 二 搭建 ...