基于Firefox 10的IndexedDB实例演示

今天做一个IndexedDB(以下简称IDB)的demo，运行环境是Firefox 10。

创新互联公司服务项目包括建昌网站建设、建昌网站制作、建昌网页制作以及建昌网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，建昌网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到建昌省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

DEMO演示链接 (firefox 10+ only)

我们做一个阅读列表的页面，可以让用户把任意网址存入这个阅读列表中，并为每一个网址起一个名字，也可以随时删除，且列表可以按网址自动去重。

正如上一篇文章介绍的步骤，我们先初始化数据库，然后建表，然后把添加/删除/读取网址的事件和数据库操作绑定在一起。

首先是html代码：

 
 
   
  
  _body onload="init()">   
  
      _button onclick="clickAddBtn()">Add_/button>   
  
      _ul id="list">_/ul>   
  
  _/body>

为了演示方便，我们引入jQuery作界面处理，再声明一个全局变量db，作为数据库连接的句柄;再声明一个全局变量list，作为网页中列表元素的jQuery句柄。

 
 
   
  
  var db;    
  
  var list = $('#list');

然后定义数据库初始化的行数init

 
 
   
  
  function init() {    
  
      var req = window.mozIndexedDB.open('readinglist', '1.0');    
  
      req.onsuccess = function (e) {    
  
          db = this.result;    
  
          // TODO: 连接成功后展示列表    
  
      };    
  
      req.onupgradeneeded = function (e) {    
  
          db = this.result;    
  
          // TODO: 版本不同时创建一个新的object store    
  
      };    
  
  }

这段代码的作用是初始化数据库(readinglist)连接，并在第一次连接数据库时创建表(links)。我们把展示列表的函数定义为showList()，把创建表的代码也补充完整，即：

 
 
   
  
  function init() {    
  
      var req = window.mozIndexedDB.open('readinglist', '1.0');    
  
      req.onsuccess = function (e) {    
  
          db = this.result;    
  
          showList();    
  
      };    
  
      req.onupgradeneeded = function (e) {    
  
          db = this.result;    
  
          db.createObjectStore('links', {keyPath: 'url'});    
  
      };    
  
  }

然后我们定义添加/删除/展示链接的函数：add(title, url)/remove(url)/showList()

 
 
   
  
  function add(title, url) {    
  
      var link = {    
  
          title: title,    
  
          url: url    
  
      }; // 创建要存储的对象    
  
      var transaction = db.transaction('links', IDBTransaction.READ_WRITE);    
  
      var store = transaction.objectStore('links');    
  
      var req = store.put(link); // put的作用是key存在时做更新处理，不存在是做添加处理    
  
      req.onsuccess = showList; // 添加成功后重新展示列表    
  
  }    
  
     
  
  function remove(url) {    
  
      var transaction = db.transaction('links', IDBTransaction.READ_WRITE);    
  
      var store = transaction.objectStore('links');    
  
      var req = store.delete(url); // 删除此链接    
  
      req.onsuccess = showList; // 删除成功后重新展示列表    
  
  }    
  
     
  
  function showList() {    
  
      // TODO: clear element: #list    
  
     
  
      var transaction = db.transaction('links');    
  
      var store = transaction.objectStore('links');    
  
      var range = IDBKeyRange.lowerBound(0); // 创建关键字范围描述    
  
      var req = store.openCursor(range); // 创建在上述范围内遍历的游标    
  
      req.onsuccess = function (e) {    
  
          var result = this.result;    
  
          if (result) {    
  
              var link = result.value;    
  
              // TODO: append this link to element: #list    
  
              result.continue();    
  
          }    
  
      };    
  
  }

注意这里的IDBKeyRange和store.openCursor是用来遍历列表的，前者确定遍历的范围，后者根据前者的范围逐条触发onsuccess事件，这里定义的遍历范围是大于0，即所有非空的url，其实所有js类型的值都是可以在一起比大小的，如果想测试比较任意两个key的大小，可以运行函数window.mozIndexedDB.cmp(any first, any second)。

最后，我们把最后两个TODO的部分补充完整，再把界面上的事件绑定好。编码工作就完成了。

 
 
   
  
  function showList() {    
  
      list.empty();    
  
     
  
      var transaction = db.transaction('links');    
  
      var store = transaction.objectStore('links');    
  
      var range = IDBKeyRange.lowerBound(0); // 创建关键字范围描述    
  
      var req = store.openCursor(range); // 创建在上述范围内遍历的游标    
  
      req.onsuccess = function (e) {    
  
          var result = this.result;    
  
          if (result) {    
  
              var link = result.value;    
  
              appendLink(link);    
  
              result.continue();    
  
          }    
  
      };    
  
  }    
  
     
  
  function appendLink(link) {    
  
      var url = link.url;    
  
      var title = link.title;    
  
      var li = $('_li>_a href="#" target="_blank">_/a> _button>X_/button>_/li>');    
  
      li.find('a').attr('title', title).attr('href', url).text(title);    
  
      li.find('button').click(function (e) {    
  
          remove(link.url);    
  
      });    
  
      list.append(li);    
  
  }    
  
     
  
  function clickAddBtn(e) {    
  
      var title = prompt('please input the title') || '[No title]';    
  
      var url = prompt('please input the url', 'http://');    
  
      if (title && url) {    
  
          add(title, url);    
  
      }    
  
  }

DEMO演示链接 (firefox 10+ only)

下一篇讨论webkit下使用IDB的注意事项，并提供兼容问题的解决办法。

【系列文章】

IndexedDB的JS接口设计详解
浅析IndexedDB存数结构
调试IndexedDB应用程序

原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2335030#Content

网页题目：基于Firefox 10的IndexedDB实例演示
本文网址：http://www.shufengxianlan.com/qtweb/news46/290096.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容