Web SQL Database概念
现在大家都离不开手机，很多事情都能用各种应用搞定，HTML5也不例外，搞出了个Web SQL Database，就是说你可以直接用JS操作SQLite的数据库，还可以异步进行！虽然HTML5规定没有提到Web SQL，但这货其实就是个独立的技术，现在像Safari、Chrome和Opera这样的主流浏览器也支持。所以，以后用HTML5开发网页时，Web SQL绝对能让你更有效地管理数据了!
核心方法：openDatabase
小伙伴们，要记住 Web SQL Database里有几招狠的，首先是用‘openDatabase’方法创库或打开库，它还能给你设定点东西。你只需要告诉它你想要什么，比如名字、型号（你知道的，我们平时说的就是版本号），还有关于这个库的描述以及它能存放多少数据之类的信息。别小瞧这个型号，更新库的时候其实挺管用，可以帮助开发者应对是否改变了数据库结构的问题。
核心方法：transaction
别小瞧咱的TransactionWeb SQL Database的”大管家”之一！有了它，数据库难题就不怕，随便怎么操作数据，都能确保原始数据和结果一致！像写代码似的，套上这个Transaction方法，事情就变得简单多了，既不用操心数据安全问题，还能随时掌控action的结果，失败了也没啥大不了的，因为整件事会自动回滚到之前那个状态，数据还是很安全滴~
核心方法：executeSql
Web SQL数据库标准里面那个executeSql，就是帮咱们搞定SQL，然后告诉咱们结果咋样的东西。咱们给它一串查询字符串，它还能换别的参数，又能通过两个回调方法告诉咱成没成功。这玩意儿，咱们自己就会弄SQL，然后参照结果决定咋办，感觉自己更带劲了，效率当然也就上去了！
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
事务处理示例
搞懂Web SQL数据库里哪些事儿是在做事务处理吗？那就来瞧瞧这个实例。想象一下，你在登入账户后想要复制表中的某些信息，同时还要插进几条新数据。如果操作过程中出了差错，像是sql语句出错之类的，那么就得重头开始整件事情。这样保证了所有的信息变化都是统一有序的，不容易出差错！
浏览器支持与兼容性
你知道吗？现在最牛的浏览器 Safari、Chrome 和 Opera 超好用的，还能支持 Web SQL。简而言之，对于 web 开发来说 Web SQL 真的是个利器，上网冲浪会爽到飞起。不过要提醒下，有些手机浏览器对这招儿可能不大感冒，或是有点儿过时。所以在开发时，兼容性还是得上心~
优势与局限
用Web SQL呗，让你的网页运行更溜，用户体验更好不过别忘了，有些浏览器、手机浏览器可能不适用呢；甚至已经有部分版本的手机浏览器都把这个功能给停掉了。所以，到底要不要使用Web SQL，还得根据你的项目需求、目标客户以及自身实力来定哟。
未来展望
web SQL demo
//创建或连接数据库
function getDb()
{
var db = openDatabase("data.db","1.0","demo",1024*1024);
return db;
}
//初始化数据库
function initDb()
{
var db = getDb();
if(db == null)
{
alert("你的浏览器不支持web SQL");
return null;
}
db.transaction(function(trans){
trans.executeSql("create table if not exists demo(name text null,title text null,content text null)",[],function(trans,result){},
function(trans,error){alert(error)})
});
}
$(function(){
var db = getDb();
initDb();
$("#btnSave").click(function(){
var name = $("#name").val();
var title = $("#title").val();
var content = $("#content").val();
//执行sql脚本来插入数据
db.transaction(function(trans){
trans.executeSql("insert into demo(name,title,content)values(?,?,?)",
[name,title,content],
function(trans,success){},
function(trans,error){alert(error);}
);
showAll();
});
});
})
//显示所有数据
function showAll()
{
$("#tblData").empty();
var db = getDb();
db.transaction(function(trans){
trans.executeSql("select * from demo",[],function(trans,data){
//获取查询到的数据
if(data)
{
for(var i=0;i<data.rows.length;i++)
{
//获取一行json数据，将数据拼接成表格
appendDataToTable(data.rows.item(i));
}
}
},function(trans,error){alert(error);});
});
}
function appendDataToTable(data)
{
var name = data.name;
var title = data.title;
var content = data.content;
var strHtml = "";
strHtml += "";
strHtml += ""+name+" ";
strHtml += ""+title+" ";
strHtml += ""+content+" ";
strHtml += " ";
$("#tblData").append(strHtml);
}
| 用户名： | |
| 标题 | |
| 留言 |
网路技术，越来越牛了！Web SQL这种前端储测方式将来肯定大有用处。说到用户体验和安保问题，真心希望它越来越好用，手机、电脑啥的都能用上就好了。
评论0