HTML5本地数据库基础操作详解


Posted in HTML / CSS onApril 26, 2016

下面分别介绍本地数据库的各个API及其使用方法。

1、利用openDatabase创建数据库

我们可以利用openDatabase方法创建数据库。openDatabase方法传递五个参数,分别是:数据库名、数据库版本号(可省略)、对数据库的描述、设置分配的数据库的大小、回调函数。

如果我们要创建一个本地数据库,可以执行如下代码:

var myWebDatabase = openDatabase(“user”, ”1.0”, “user info”, 1024*1024, function(){}); 

这样就创建了一个用户信息表。之后可以对创建的本地数据库是否成功进行验证:

SQL Code复制内容到剪贴板
  1. if(!dataBase){     
  2. alert(“The database has been created successfully!”);     
  3. }else{     
  4. alert(“The database has not been successfully created.”)     
  5. }if(!dataBase){     
  6. alert(“The database has been created successfully!”);     
  7. }else{     
  8. alert(“The database has not been successfully created.”)     
  9. }     
  10.   

2、利用executeSql方法执行sql语句

使用executeSql方法,我们可以直接执行正常的sql语句,如下:

context.executeSql(‘INSERT INTO testTable(id,name) VALUES (1,”Martin”)’);

当然,这里只体现了executeSql的功能,并没有确切说明executeSql方法怎么用,用在哪里。要想使用该方法就必须介绍transaction。

3、利用transaction处理事务

该方法用来处理事务,可以传递三个参数:包含事务内容的一个方法、执行成功的回调函数、执行失败的回调函数(后两者可以省略)。

结合transaction和executeSql,我们就可在我们之前创建的数据库中添加创建数据表并添加数据了,代码如下:

JavaScript Code复制内容到剪贴板
  1. myWebDatabase.transaction(function (context) {     
  2.            context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');     
  3.            context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');     
  4.            context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');     
  5.            context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');     
  6.          });     
  7.   

sql语句的含义不多解释,但从这里已经可以很明白的看出如何在本地数据库中,想在一般数据库中一样创建数据库数据表并添加数据了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文链接:http://blog.csdn.net/fareise/article/details/50786594

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 #HTML / CSS
基于html5绘制圆形多角图案
Apr 21 #HTML / CSS
浅析border-radius如何兼容IE
Apr 19 #HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 #HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 #HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 #HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 #HTML / CSS
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python树莓派红外反射传感器
2019/01/21 Python
安装docker-compose的两种最简方法
2019/07/30 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
市场推广策划方案
2014/06/02 职场文书
英语邀请函范文
2015/02/02 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
安全生产奖惩制度
2015/08/06 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js