初始化websql数据库的参数信息

 var config = {

     name: 'my_plan',

     version: '',

     desc: 'manage my plans',

     size: 20 * 1024

 };
7  var db = window.openDatabase(config.name, config.version, config.desc, config.size);

此函数为创建一个表

 function crateTable() {

     var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';

     db.transaction(function(tx) {

     　　tx.executeSql(sql, null, function(tx, rs) {

             console.log('执行sql成功');

         }, errorCallback);

     });

 }

接下来往表里增加一条数据

 function addPlan(values) {

      var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';

      db.transaction(function(tx) {

      　　tx.executeSql(sql, values, function(tx, rs) {

                var effectRow = rs.rowsAffected;

                console.log('影响记录条数:' + effectRow);

                effectRow && console.log('执行sql成功');

          }, errorCallback);

     });

 }

查询所以记录代码

 function getPlanList() {

     var sql = 'SELECT * FROM t_plan';

     db.transaction(function(tx) {

     　　tx.executeSql(sql, null, function(tx, rs) {

            console.log('list:' + rs.rows);

            console.log('item:' + JSON.stringify(rs.rows.item(0)));

         }, errorCallback);

    });

9 };

删除一条记录

 function deletePlan(values) {

      var sql = 'DELETE FROM t_plan WHERE title = ?';

      db.transaction(function(tx) {

           tx.executeSql(sql, values, function(tx, rs) {

                 var effectRow = rs.rowsAffected;

                 console.log('影响记录条数:' + effectRow);

                 effectRow && console.log('执行sql成功');

           }, errorCallback);

      });

 }

修改一条记录

 function updatePlan(values) {

      var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';

      db.transaction(function(tx) {

           tx.executeSql(sql, values, function(tx, rs) {

                var effectRow = rs.rowsAffected;

                console.log('影响记录条数:' + effectRow);

                effectRow && console.log('执行sql成功');

            }, errorCallback);

      });

 }

下面附上源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style type="text/css">

			input {

				display: block;

			}

		</style>

	</head>

	<body>

		<input type="text" id="title" />

		<input type="text" id="content" />

		<input type="text" id="target_time" />

		<button type="button" id="add_plan">add</button>

		<button type="button" id="select">select</button>

		<script type="text/javascript">

			//			(function() {

			document.getElementById("add_plan").addEventListener('click', function() {

				var title = document.getElementById("title").value;

				var content = document.getElementById("content").value;

				var targetTime = document.getElementById("target_time").value;

				var createTime = new Date().getTime();

				var values = [title, content, targetTime, createTime];

				addPlan(values);

			});

			document.getElementById("select").addEventListener('click', function() {

				getPlanList();

			});

			// 判定当前环境是否支持websql

			//				if(!window.openDatabase) {

			//					console.log('当前环境不支持websql');

			//					return;

			//				}

			var config = { //初始化websql数据库的参数信息

				name: 'my_plan',

				version: '',

				desc: 'manage my plans',

				size: 20 * 1024

			};

			var db = window.openDatabase(config.name, config.version, config.desc, config.size);

			crateTable(db);

			function errorCallback(error) {

				console.error('error:' + error.message);

			}

			function crateTable() {

				var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';

				db.transaction(function(tx) {

					tx.executeSql(sql, null, function(tx, rs) {

						console.log('执行sql成功');

					}, errorCallback);

				});

			}

			function addPlan(values) {

				var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';

				db.transaction(function(tx) {

					tx.executeSql(sql, values, function(tx, rs) {

						var effectRow = rs.rowsAffected;

						console.log('影响记录条数:' + effectRow);

						effectRow && console.log('执行sql成功');

					}, errorCallback);

				});

			}

			function getPlanList() {

				var sql = 'SELECT * FROM t_plan';

				db.transaction(function(tx) {

					tx.executeSql(sql, null, function(tx, rs) {

						console.log('list:' + rs.rows);

						console.log('item:' + JSON.stringify(rs.rows.item(0)));

					}, errorCallback);

				});

			};

			function deletePlan(values) {

				var sql = 'DELETE FROM t_plan WHERE title = ?';

				db.transaction(function(tx) {

					tx.executeSql(sql, values, function(tx, rs) {

						var effectRow = rs.rowsAffected;

						console.log('影响记录条数:' + effectRow);

						effectRow && console.log('执行sql成功');

					}, errorCallback);

				});

			}

			function updatePlan(values) {

				var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';

				db.transaction(function(tx) {

					tx.executeSql(sql, values, function(tx, rs) {

						var effectRow = rs.rowsAffected;

						console.log('影响记录条数:' + effectRow);

						effectRow && console.log('执行sql成功');

					}, errorCallback);

				});

			}

			//			}());

		</script>

	</body>

</html>

　　

webSql的简单小例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. C#利用事件与委托进行窗体间传值简单小例子

    本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...

  3. ASP.NET Cookie对象到底是毛啊？（简单小例子）

    记得刚接触asp.net的时候,就被几个概念搞的头痛不已,比如Request,Response,Session和Cookie.然后还各种在搜索引擎搜,各种问同事的,但是结果就是自己还是很懵的节奏. 那 ...

  4. 关键字Lock的简单小例子

    一.什么是Lock? Lock——字面上理解就是锁上:锁住:把……锁起来的意思: 为什么要锁?要锁干什么?——回到现实中可想象到,这个卫生间我要上,其他人不要进来!(所以我要锁住门):又或者土味情话所 ...

  5. 详细解读Android中的搜索框（一）—— 简单小例子

    这次开的是一个讲解SearchView的栏目,第一篇主要是给一个小例子,让大家对这个搜索视图有一个了解,之后再分布细化来说. 目标: 我们先来定个目标,我们通过搜索框来输入要搜索的联系人名字,输入的时 ...

  6. 关于ExpandableListView用法的一个简单小例子

    喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...

  7. Ajax的简单小例子

    1.首先下载ajax.dll,一个百度一下都有下载的!自行查找. 2.把ajax.dll导入到工程.右键工程-->添加引用--->浏览,找到下载好的ajax.dll文件,点击确定,这时候在 ...

  8. SpringMVC静态文件(图片)访问+js访问 简单小例子

    项目文件布局: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...

  9. MVC实现（简单小例子）

    Here I’ll demonstrate simple Spring MVC framework for building web applications. First thing first. ...

随机推荐

  1. andriod socket开发问题小结

    andriod socket开发问题小结 个人信息:就读于燕大本科软件project专业 眼下大四; 本人博客:google搜索"cqs_2012"就可以; 个人爱好:酷爱数据结构 ...

  2. has实现 更新视图但不重新加载页面原理

    URL中#符号本身以及它的字符称之为hash,可以通过window.location.hash获取.hash具有如下特点: 1.has虽然出现在URL中,但不会被包括在http请求中.因此,改变has ...

  3. org.hibernate.HibernateException: No Hibernate Session bound to thread, and configuration does not

    遇到这个问题之前,我去百度和谷歌去搜索了一下.发现各种说法.可是针对我的项目而言,也就是公司的项目而言,这个问题的根源并不是是网上所说的那样. 最后是通过自己的想法做測试得到了解决. 1.首先说说我的 ...

  4. UILongPressGestureRecognizer 运行两次的解决的方法

    近期维护之前用iOS SDK 3.2写过的3年多前的map方面的模块,在地图上长按pin,发觉一个点莫名奇异点插了两个pin. 查了一下,原来是如今的sdk要在UILongPressGestureRe ...

  5. 容器HashMap原理（学习）

    一.概述 基于哈希表的 Map 接口的非同步实现,允许使用 null 值和 null 键,不保证映射的顺序 二.数据结构 HashMap实际上是一个“链表散列”的数据结构,即数组和链表的结合体:Has ...

  6. Hibernate - Query简易

    package cn.demo; import java.util.List; import org.hibernate.Query; import org.hibernate.Session; im ...

  7. .NET下为百度文本编辑器UEditor增加图片删除功能

    [摘要:比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地 ...

  8. 英式英语 vs 美式英语

    0. 常见不同 日期的表达: 美国:月日年: 英国:日月年: 1. 发音 schedule,美 ['skɛdʒul],英 [ˈʃɛdjuːl] pecan,山核桃,英 ['piːk(ə)n;],美 [ ...

  9. [Codeforces 1037D] Valid BFS？

    [题目链接] http://codeforces.com/problemset/problem/1037/D [算法] 首先求出每个点的父节点 , 每棵子树的大小 然后判断BFS序是否合法即可 时间复 ...

  10. Windows路径

    绝对路径 是从盘符开始的路径,形如 C:\windows\system32\cmd.exe 相对路径 是从当前目录开始的路径,假如当前目录为C:\windows 要描述上述路径,只需输入 system ...