注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

HTML5 中的 Web SQL Database 简单使用  

2017-09-21 14:10:29|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HTML5 对于简单的键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是对繁琐的关系数据进行处理的时候,它就力所不及了,这里需要新推出的“Web Storage” API[Web SQL Database]。
相关代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//建表,参数分别为数据库名,版本号,描述,数据库大小[2M]
var db = openDatabase('mydb', '1.0', 'SiteDB', 2 * 1024 * 1024);
var msg;
//如果创建不成功,就报错
if(!db)alert("Failed to connect to database.");
db.transaction(function (tx) {
//执行SQL语名,不需要返回先删除表
tx.executeSql('DROP TABLE LOGS');
//再建表
tx.executeSql('CREATE TABLE LOGS (id unique, url)');
//或者可以直接使用如下
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, url)');
//插入测试数据
tx.executeSql('INSERT INTO LOGS (id, url) VALUES (1, "593668.com")');
tx.executeSql('INSERT INTO LOGS (id, url) VALUES (2, "237h.com")');
//如果需要传递动态值,请使用如下语句
e_id=3;
e_url="9zfx.com";
tx.executeSql('INSERT INTO LOGS (id,url) VALUES (?, ?)', [e_id, e_url]);
//删除表数据
tx.executeSql('DELETE FROM LOGS WHERE id=3');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
//开始取相应的表数据,需要返回,这里指定返回数据results
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
//将相应表数据显示出来
msg = "<p><b>" + results.rows.item(i).url + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

这个代码也是非常简单,如果有使用其它SQL语句的经验,那么更易上手。执行的效果如下:
HTML5 中的 Web SQL Database 简单使用 - 1976xyg - 红尘若梦
要注意的是,如果不是绝对需要,请不要使用 Web SQL Database,因为会让代码更加复杂(匿名内部类的内部函数,回调函数等等)。对大多数情况下,本地存储或会话存储就能够完成相应的任务那么不需要用Web SQL Database,尤其是你需要保持对象状态持久化的情况。
  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017