webSql的简单小例子
初始化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的简单小例子的更多相关文章
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- C#利用事件与委托进行窗体间传值简单小例子
本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...
- ASP.NET Cookie对象到底是毛啊？（简单小例子）
记得刚接触asp.net的时候,就被几个概念搞的头痛不已,比如Request,Response,Session和Cookie.然后还各种在搜索引擎搜,各种问同事的,但是结果就是自己还是很懵的节奏. 那 ...
- 关键字Lock的简单小例子
一.什么是Lock? Lock——字面上理解就是锁上:锁住:把……锁起来的意思: 为什么要锁?要锁干什么?——回到现实中可想象到,这个卫生间我要上,其他人不要进来!(所以我要锁住门):又或者土味情话所 ...
- 详细解读Android中的搜索框（一）—— 简单小例子
这次开的是一个讲解SearchView的栏目,第一篇主要是给一个小例子,让大家对这个搜索视图有一个了解,之后再分布细化来说. 目标: 我们先来定个目标,我们通过搜索框来输入要搜索的联系人名字,输入的时 ...
- 关于ExpandableListView用法的一个简单小例子
喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...
- Ajax的简单小例子
1.首先下载ajax.dll,一个百度一下都有下载的!自行查找. 2.把ajax.dll导入到工程.右键工程-->添加引用--->浏览,找到下载好的ajax.dll文件,点击确定,这时候在 ...
- SpringMVC静态文件(图片)访问+js访问 简单小例子
项目文件布局: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...
- MVC实现（简单小例子）
Here I’ll demonstrate simple Spring MVC framework for building web applications. First thing first. ...
随机推荐
- ppc_85xx-gcc -shared -fPIC liberr.c -o liberr.so
fPIC作用于编译阶段,告诉编译器产生与位置无关代码(Position-Independent Code), 则产生的代码中,没有绝对地址,所有使用相对地址.故而代码能够被载入器载入到内存的随意 ...
- struts1与struts2的差别
Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与Struts 1的体系结 ...
- hdu oj 3127 WHUgirls(2009 Asia Wuhan Regional Contest Online)
WHUgirls Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total ...
- 省市联动选择的一个demo，利用vue+webpack+amaze-vue实现省市区联动选择组件
https://github.com/sunshineJi/vue-city-picker
- ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础，单线程，跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js：使用 JavaScript 生成
ASP.NET Boilerplate 学习 1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...
- Java实现二叉排序树的插入、查找、删除
import java.util.Random; /** * 二叉排序树(又称二叉查找树) * (1)能够是一颗空树 * (2)若左子树不空,则左子树上全部的结点的值均小于她的根节点的值 * (3)若 ...
- Cocos2d-X开发中国象棋《四》设计游戏场景
设计完開始界面后就要设计游戏界面了 为了理清设计思路先看一张游戏界面效果图 游戏界面设计思路: 1.在窗体上放一张桌子 2.在桌子上放一个棋盘 3.在棋盘右边加入新局button,暂不实现详细的功能 ...
- c# DataGridView样式设置无效
对DataGridView中的某些行设置样式时,无效,最后发现,我是先设置完样式再进行展现的this.controls.Add,应该先展现完了,再设置样式.
- Delphi中SendMessage使用说明（所有消息说明） good
Delphi中SendMessage使用说明 SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数Po ...
- ios29--多线程
进程是指在系统中正在运行的一个应用程序(一个程序可以对应多个进程).每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内.比如同时打开迅雷.Xcode,系统就会分别启动2个进程.1个进程要 ...