HTML5的数据存储之Web Sql

最新推荐文章于 2015-07-28 16:16:34 发布

根号三2012傻乎乎

最新推荐文章于 2015-07-28 16:16:34 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/u010590977/article/details/23392933

版权

要想使用Web Sql存储数据，首先要建立一个web sql数据库或打开一个已有的数据库。创建或打开数据库需要使用方法openDatabase，该方法使用说明如下：

openDatabase(dbName,dbVersion,dbDesc,dbSize,callback());

参数如下：

dbName：数据库名称；

dbVersion：数据库版本，如 1.0、2.0；

dbDesc：数据库描述，大体描述下数据库的用途；

dbSize：指定数据库的大小；

callBack：回调函数，指定成功创建或打开数据库的回调函数

下面做一个小练习，点击“创建数据库”按钮，创建一个数据库，并提示用户创建成功。

<!DOCTYPE html>

<html>

<head>

<title>Web Sql练习</title>

</head>

<body>

<form>

</form>

var DB;

//回调函数

function showResult(){

alert("数据库创建成功”);}

function initDatabase(){

//检查浏览器是否支持数据库

if(!window.openDatabase){alert("当前浏览器不支持web sql数据库");}

else{

var dbName="mydb";

var dbVersion="1.0";

var dbDesc="demo database";

var dbSize=100000;

DB=openDatabase(dbName,dbVersion,dbDesc,dbSize,showResult());}

}</script>

</body>

</head>

用Google chorme浏览器打开，点击”创建数据库“按钮，可看到以下图片

按下F12键，选择"Resource"可看到所见的数据库

下面在下创建一个useinfo表，然后进行增删改查，其流程如下：打开数据库（如果没有则需要创建），开启一个事物，执行sql语句，语法db.transaction(function (tx){tx.execute('sql')}）；db为当前操作的数据库对象，sql为要执行的SQL语句，execute sql完整语法如下：tx.executeSql(‘sql语句’，[params],function(tx,rs){},function(tx,error){});

[params]为sql语句的参数，不需要时可值为空[]，function(tx,rs){}为执行成功后的回调函数，rs为执行sql语句后返回的结果集，function(tx,error){}为失败后的回调函数

然后向表中插入数据

更新操作：

删除操作：function deleteData(){
   DB.transaction(function (tx){
       tx.executeSql('delete from USEINFO where username=?',["Tom"],function(tx,rs){alert("删除成功");},function(tx,error){alert("失败"+error.message);})
   });
}

查询：function querryData(){
   DB.transaction(function (tx){
    tx.executeSql('select *from USEINFO',[],function(tx,rs){var msg="";for(var i=0;i<rs.rows.length;i++){msg+='username:'+rs.rows.item(i).username+',email:'+rs.rows.item(i).email;
alert(msg);}},function(tx,error){alert("失败"+error.message);})
   });
}