今天做一個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的注意事項,并提供兼容問題的解決辦法。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

