首页 > 代码库 > webSQL

webSQL

2024-08-14 20:34:33   217人阅读

上一节讲述了localStorage,sessionStorage本地存储，但是如何实现本地数据库存储呢？

这一节将讲述本地存储方式websql存储。

websql存储方式一共有以下几个方法

openDatabase:这个方法使用现有的数据库或新建数据库来创建数据库对象。

transaction：这个方法允许我们执行事务处理;

executeSql:这个方法用于执行sql语句;

1 var db = openDatabase(name,version,displayName,estimateSize,creationCallback);

name:数据库的名字;

version:数据库的版本号;

displayName:数据库的描述;

estimateSize:数据库保存数据的大小;

createCallback:回调函数：

2 调用transaction来执行sql语句

transaction(function(tx){})

tx:回调函数所接收的参数，此参数为transaction对象的引用。

3 调用executeSql 方法来表示处理事务

transaction.executeSql(sql,[],dataHandler,errorHandler);

sql:要执行的sql语句;

[ ]:sql语句中的占位符“？”所对应的参数。

dataHandler：执行sql语句成功时调用的回调函数：

errorHandler:执行sql语句失败时调用的回调函数。

 

先贴代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>webSQL</title>    <script src="jquery.min.js" type="text/javascript"></script>    <script type="text/javascript">        //初始化数据库        function initDatabase(){            var db =getCurrentDB();            if(!db){                alert(‘您的浏览器不支持HTML本地数据库‘);                return ;            }            db.transaction(function(trans){                trans.executeSql(‘create table if not exists Demo(uName text null,title text null,words text null)‘,[],function(trans,result){},                        function(trans,message){                        });            })        }        //创建数据库      function getCurrentDB(){          var db = openDatabase(‘data.db‘,‘1.0‘,‘demo data‘,1024*1024);          return db;      }        $(function(){            //初始化数据库            initDatabase();            $("#save").on(‘click‘,function(){                var txtName = $(‘#userName‘).val();                var txtTitle= $(‘#userTitle‘).val();                var txtWords = $(‘#userContent‘).val();                //执行sql脚本来插入数据                var db = getCurrentDB();                db.transaction(function(trans){                    trans.executeSql(‘insert into Demo(uName,title,words)values(?,?,?)‘,[txtName,txtTitle,txtWords],function(ts,data){},function(ts,message){                        alert(message);                    })                })            })            //将数据展示到表格中            $("#showContent").on(‘click‘,function(){                showAllTheData();            });            //显示所有数据库中的数据到页面中            function showAllTheData(){                $(‘#showTable‘).empty();                var db =getCurrentDB();                db.transaction(function(trans){                    trans.executeSql(‘select * from Demo‘,[],function(ts,data){                        if(data){                            //循环记录中的数据                            for(var i=0;i<data.rows.length;i++){                                //获取每一行数据的json对象（键值对组成),将数据拼接成表格中的一行行数据                                appendDataToTable(data.rows.item(i));                            }                        }                    },function(ts,message){                        alert(message);                    })                })            }            function appendDataToTable(data){                var txtName =data.uName;                var txtTitle =data.title;                var txtWords =data.words;                var strHTML =‘‘;                strHTML+=‘<tr>‘;                strHTML += "<td>"+txtName+"</td>";                strHTML += "<td>"+txtTitle+"</td>";                strHTML += "<td>"+txtWords+"</td>";                strHTML+=‘</tr>‘;                $("#showTable").append(strHTML);            }        })    </script></head><body><table>    <tr>        <td>用户名:</td>        <td><input type="text" id="userName"/></td>    </tr>    <tr>        <td>标题:</td>        <td><input type="text" id="userTitle"/></td>    </tr>    <tr>        <td>留言:</td>        <td><input type="text" id="userContent"/></td>    </tr></table><input type="button" id="save" value="保存" /><input type="button" id="showContent" value="展示你的信息"/><table id =‘showTable‘></table></body></html>

 

webSQL


联系
我们