建站
咨詢
售后
建站咨詢
新聞中心
今天做一個(gè)IndexedDB(以下簡(jiǎn)稱IDB)的demo，運(yùn)行環(huán)境是Firefox 10。
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括建昌網(wǎng)站建設(shè)、建昌網(wǎng)站制作、建昌網(wǎng)頁制作以及建昌網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，建昌網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到建昌省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
DEMO演示鏈接 (firefox 10+ only)
我們做一個(gè)閱讀列表的頁面，可以讓用戶把任意網(wǎng)址存入這個(gè)閱讀列表中，并為每一個(gè)網(wǎng)址起一個(gè)名字，也可以隨時(shí)刪除，且列表可以按網(wǎng)址自動(dòng)去重。
正如上一篇文章介紹的步驟，我們先初始化數(shù)據(jù)庫，然后建表，然后把添加/刪除/讀取網(wǎng)址的事件和數(shù)據(jù)庫操作綁定在一起。
首先是html代碼：
- _body onload="init()">
- _button onclick="clickAddBtn()">Add_/button>
- _ul id="list">_/ul>
- _/body>
為了演示方便，我們引入jQuery作界面處理，再聲明一個(gè)全局變量db，作為數(shù)據(jù)庫連接的句柄;再聲明一個(gè)全局變量list，作為網(wǎng)頁中列表元素的jQuery句柄。
- var db;
- var list = $('#list');
然后定義數(shù)據(jù)庫初始化的行數(shù)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: 版本不同時(shí)創(chuàng)建一個(gè)新的object store
- };
- }
這段代碼的作用是初始化數(shù)據(jù)庫(readinglist)連接，并在第一次連接數(shù)據(jù)庫時(shí)創(chuàng)建表(links)。我們把展示列表的函數(shù)定義為showList()，把創(chuàng)建表的代碼也補(bǔ)充完整，即：
- 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'});
- };
- }
然后我們定義添加/刪除/展示鏈接的函數(shù)：add(title, url)/remove(url)/showList()
- function add(title, url) {
- var link = {
- title: title,
- url: url
- }; // 創(chuàng)建要存儲(chǔ)的對(duì)象
- var transaction = db.transaction('links', IDBTransaction.READ_WRITE);
- var store = transaction.objectStore('links');
- var req = store.put(link); // put的作用是key存在時(shí)做更新處理，不存在是做添加處理
- 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); // 創(chuàng)建關(guān)鍵字范圍描述
- var req = store.openCursor(range); // 創(chuàng)建在上述范圍內(nèi)遍歷的游標(biāo)
- 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是用來遍歷列表的，前者確定遍歷的范圍，后者根據(jù)前者的范圍逐條觸發(fā)onsuccess事件，這里定義的遍歷范圍是大于0，即所有非空的url，其實(shí)所有js類型的值都是可以在一起比大小的，如果想測(cè)試比較任意兩個(gè)key的大小，可以運(yùn)行函數(shù)window.mozIndexedDB.cmp(any first, any second)。
最后，我們把最后兩個(gè)TODO的部分補(bǔ)充完整，再把界面上的事件綁定好。編碼工作就完成了。
- function showList() {
- list.empty();
- var transaction = db.transaction('links');
- var store = transaction.objectStore('links');
- var range = IDBKeyRange.lowerBound(0); // 創(chuàng)建關(guān)鍵字范圍描述
- var req = store.openCursor(range); // 創(chuàng)建在上述范圍內(nèi)遍歷的游標(biāo)
- 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的注意事項(xiàng)，并提供兼容問題的解決辦法。
【系列文章】
- IndexedDB的JS接口設(shè)計(jì)詳解
- 淺析IndexedDB存數(shù)結(jié)構(gòu)
- 調(diào)試IndexedDB應(yīng)用程序
原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2335030#Content
網(wǎng)頁題目：基于Firefox 10的IndexedDB實(shí)例演示
鏈接地址：http://fisionsoft.com.cn/article/dppoigi.html
