HTML5本地存储技术之-本地数据库操作

最新推荐文章于 2020-06-26 18:07:16 发布

南京闫伟亮的野爹

最新推荐文章于 2020-06-26 18:07:16 发布

阅读量235

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jaac0chbb&title=HTML5%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%8A%80%E6%9C%AF%E4%B9%8B-%E6%9C%AC%E5%9C%B0%E6%95%B0%E6%8D%AE%E5%BA%93%E6%93%8D%E4%BD%9C

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

如果有一天断网了，如果有一天断电了，如果有一天同时断电又断网了，那么.....???没关系！我有 Html5本地存储技术，我有SQLLite，我可以跟往常一样完成我的业务操作，等什么时候恢复网络，恢复电了，我再把我本地的数据同步到服务器数据库，这是不是件很酷的事情!

使用SQLLite数据库，需要两个必要步骤：

1.创建数据库访问对象

2.使用事务处理

创建对象：

openDatabase(dbName, version, dbDesc, size)

实际访问：

db.transaction( function () {

　　tx. excuteSql('create table ......');

});

数据查询：

excuteSql(sql, [], dataHandler, errorHandler)//后面两个为回调函数；[]估计是做sql注入处理光说不练假把式，我们来实际操作一番，使用数据库实现web通讯录（左思右想还是用上了jQuery）：

做的时候居然发现我的FF不支持本地数据库！！！以下是用chrome完成的简单的通讯录：

 
<!DOCTYPE html  >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style>
   span{ cursor: pointer;}
   </style>
   <script src="../jquery-1.7.1.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           var search = $('#search');
           var btSearch = $('#btSearch');

           var phoneBook = $('#phoneBook');
           var name = $('#name');
           var phone = $('#phone');
           var add = $('#add');

           //开始程序
           var db = openDatabase('phoneBook', '', 'my', 102400);

           init();

           add.click(function () {
               save(name.val(), phone.val());
           });
           btSearch.click(function () {
               init(search.val())
           });
           $('#phoneBook span').click(function () {
               deleteByName($(this).attr('name'));
               s = '';
           });


           //初始化界面
           function init(name) {
               db.transaction(function (tx) {
                   tx.executeSql('create table if not exists phoneBook(name text, phone text)', []);
                   var sql = 'select * from phoneBook where 1=1';
                   var param = [];
                   if (name) {
                       sql  = ' and name=? ';
                       param.push(name);
                   }
                   tx.executeSql(sql, param, function (tx, rs) {
                       phoneBook.html('');
                       for (var i = 0, len = rs.rows.length; i < len; i  ) {
                           var data = rs.rows.item(i);
                           showData(data);
                       }
                   });
               });
           }

           function showData(data) {
               var str = '<div>姓名：'   data.name   '；电话：'   data.phone   ' <span onclick="del(\''   data.name   '\')" >删除</span></div>';
               phoneBook.append($(str));
           }

           //删除数据
           function deleteByName(name) {
               db.transaction(function (tx) {
                   tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {
                       init();
                   })
               });
           }
           window.del = deleteByName;
           //增加
           function save(name, phone) {
               db.transaction(function (tx) {
                   tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {
                       var d = {};
                       d.name = name;
                       d.phone = phone;
                       showData(d);
                   })
               });
           }

       });
   
   </script>
</head>
<body>
   <h1>
       本地数据库实现web通讯录</h1>
   <input type="text" id="search" placeholder="联系人姓名" />
   <button id="btSearch">
       搜索</button>
    
   <div id="phoneBook">
   </div>
   <hr />
   姓名：<input type="text" id="name" /><br />
   手机：<input type="text" id="phone" /><br />
   <button id="add">
       添加到通讯录</button>
</body>
</html> 
   

南京闫伟亮的野爹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5本地存储技术之-本地数据库操作

如果有一天断网了，如果有一天断电了，如果有一天同时断电又断网了，那么.....???没关系！我有Html5本地存储技术，我有SQLLite，我可以跟往常一样完成我的业务操作，等什么时候恢复网络，恢复电...
复制链接

扫一扫

专栏目录