HTML5本地存储之Web SQL Database

来源：互联网发布：古墓丽影8for mac 编辑：程序博客网时间：2024/06/05 09:00

本文章是接着上一篇文章接着写的。

简介

如果是要本地浏览器保存复杂的数据，则可以借助Web SQL Database API来实现，可以使用的SQL语句完场复杂数据的存储与查询。

Web SQL Database 规范使用的是SQLite数据库，它允许应用程序通过一个异步的JavaScripte接口访问数据库。虽然Web SQL不属于HTML5规范，而且HTML5最终也不会选择它，但是对于移动领域是非常有用的，以为在任何情况下，SQLAPI在数据库中的数据处理能力都是无法比拟的。

简单入门

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>hello world</title><script type="text/javascript">//1.打开数据库，该方式有五个参数，第一个参数表示数据库名，第二个参数表示版本号，第三个参数表示数据库的描述，第四个参数表示数据库的大小，第五个参数表示创建回调函数var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024);//2.创建数据表db.transaction(function(tx){tx.executeSql("create table if not exists UserName (id unqiue,Name)");//3.添加数据至数据表tx.executeSql("insert into UserName(id,name) values (1,'张三')");tx.executeSql("insert into UserName(id,name) values (2,'李四')");});//4. 读取数据库中的数据db.transaction(function (tx){tx.executeSql("select * from UserName",[],function(tx,results){var len=results.rows.length;for(var i=0;i<len;i++)console.log(results.rows.item(i).Name);},null);});</script></head><body></body></html>

可以说使用起来还是挺简单容易上手的。

实战：基本的数据库操作实例

案例简介：

设计一个简易的管理界面，包含一个填写姓名的组件，并有一个查询按钮，可以查询Web SQL数据库中的数据。添加按钮可以添加数据，如果单击列表中的编辑，则表单会对该项进行编辑更新，实际效果如果所示：

代码实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>本地数据访问实例e</title><script type="text/javascript">//初始化页面的脚本  1.打开数据库  2. 创建/打开数据表//打开数据库，如果不存在则创建var db=openDatabase("TestDB","1.0","测试数据库",2*104*1024);//创建/打开数据表,如果存在则不创建db.transaction(function(tx){tx.executeSql("create table if not exists UserName(id unique,Name)");});//实现查询数据function Query(){var name=document.getElementById("name");db.transaction(function(tx){tx.executeSql("select * from UserName where Name like'%"+name.value+"%' order by id desc ",[],function(tx,results){var len=results.rows.length;var msg="";for(var i=0;i<len;i++){msg+="<li> ";msg+="<span>"+results.rows.item(i).Name+"</span>";msg+="<a href='###' onclick=\" SetForm('"+results.rows.item(i).id+"','"+results.rows.item(i).Name+"') \">编辑</a> "; msg+="<a href='###' onclick='Delete("+results.rows.item(i).id+")'>删除</a>";msg+="</li>";}document.getElementById("msg").innerHTML=msg;},null);});}    //初始化表单function SetForm(id,name){if(id){document.getElementById("id").value=id;document.getElementById("name").value=name;document.getElementById("submit").onclick=function(){Update();};document.getElementById("submit").innerHTML="更新";}else{document.getElementById("id").value="";document.getElementById("name").value="";document.getElementById("submit").onclick=function(){Insert();};document.getElementById("submit").innerHTML="添加";}}</script><script type="text/javascript">function Insert(){//添加数据var name=document.getElementById("name").value;if(name=="") return;  //没有值，则不处理//获取可用的最小id值var maxid;db.transaction(function(tx){tx.executeSql("select id from UserName order by id desc",[],function(tx,result){if(result.rows.length)maxid=parseInt(result.rows.item(0).id)+1;elsemaxid=1;},null);});//添加一条数据，并更新显式db.transaction(function(tx){tx.executeSql("insert into UserName(id,name) values('"+maxid+"','"+name+"')",[],function(tx,result){SetForm();Query();});});}//更新数据function Update(){db.transaction(function(tx){var id=document.getElementById("id").value;var name=document.getElementById("name").value;console.log(name);tx.executeSql("update UserName set Name='"+name+"' where id='"+id+"'",[],function(tx,result){SetForm();Query();});});}//删除数据function Delete(id){db.transaction(function(tx){tx.executeSql("delete from UserName where id='"+id+"'",[],function(tx,results){SetForm();Query();});});}</script></head><body><input type="hidden" id="id"><input type="text" id="name" placeholder="请输入姓名"/><button onclick="Insert()" id="submit">添加</button><button onclick="Query()">查询</button><br/><ul id="msg"></ul></body></html>

至此，与数据库有关的基本操作完成，我们可以在运行的页面上实现数据的添加、修改、删除和查询。

0 1