変数 =【IDBObjectStore】.openCursor();
【IDBRequest】.onsuccess = function(event){
変数 = event.target.result;
}
【IDBCursorWithValue】.continue();これにより、2つ目のデータ取得が実行されます。そして取り出されると、再びonsuccessの関数が実行されるのです。そしてまたcontinueするとまたonsuccessが……という具合に、「continueしてはonsuccessの関数で必要情報を得る」ということを繰り返してデータを順に取り出していくというわけです。
re.onsuccess = function(event){onsuccessのメソッドでは、まずevent.target.resultを取得し、そこからvalueでデータを取り出して必要な処理をしています。そしてそれらが終わったら、最後にcur.continue();で次のデータ取得を呼び出しているのです。これで必要なだけいくらでもデータを順に取り出せるのですね。
var cur = event.target.result;
if (!cur) return;
var val = cur.value;
……略……
cur.continue();
};
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Sample</title> <style> h1 {font-size: 14pt; font-weight:bold; background-color:#DDF; padding:3px; } #ftable tr td { background-color:#CFC; } #datas tr td { background-color:#FCC; } </style> <script type="text/javascript"> var IDBTransaction; var IndexedDB; var db; var objectStore; function initial(){ IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; try { IndexedDB = mozIndexedDB; } catch(e){} try { IndexedDB = webkitIndexedDB; } catch(e){} var request = IndexedDB.open("MyTestDatabase"); request.onerror = function(event) { alert("ERROR!"); }; request.onsuccess = function(event) { db = request.result; createObjectStoreMethod(); //alert("OK!"); }; } function createObjectStoreMethod(){ var request = db.setVersion("1.0"); request.onerror = function(event) { /* ERROR */ }; request.onsuccess = function(event) { try { objectStore = db.createObjectStore("mydata", { keyPath: "name" }); objectStore.createIndex("name", "name", { unique: true }); }catch(e){} createList(); }; } function createList(){ if (!db) return; var datas = document.getElementById("datas"); for (var i =datas.childNodes.length-1; i>=0; i--){ datas.removeChild(datas.childNodes[i]); } var objectStore = db.transaction("mydata").objectStore("mydata"); var re = objectStore.openCursor(); re.onsuccess = function(event){ var cur = event.target.result; if (!cur) return; var val = cur.value; var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = val.name; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = val.email; tr.appendChild(td2); var td3 = document.createElement("td"); td3.innerHTML = val.tel; tr.appendChild(td3); datas.appendChild(tr); cur.continue(); }; } </script> </head> <body onload="initial();"> <h1>Index DB Sample.</h1> <table id="datas" width="400px"></table> </body> </html>
<< 前へ | 次へ >> |