アプリ版：「スタンプのみでお礼する」機能のリリースについて

マジレス希望

JavaScriptのindexedDBに格納した値の検索、表示について

解決済

  • 質問者：tanakaokada
  • 質問日時：
  • 回答数：2件

以下の①1.キーの設定で追加したキー・バリュー値を、②2.参照・取得したい値のキーでキー値を取得し、③3.処理結果に①で追加さたバリュー値を表示したいのですが上手く表示されません。
app.indexedDB.getValue =function(e)が希望通りに動作していません。
どこを修正すれば良いのでしょうか？
拙い説明で申し訳ございませんがよろしくお願いします。
<html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>1.キーの設定</h3>
<ul>
<li>バリュー:
<input id="todovalue" name="todovalue" type="text"/>
<li>キー:<input type="text" id="todoItem" name="todo" /></li>
</ul>
<input type="button" id="btnAddTodo" value="追加"/><br>
<ul id="todoItems">kekka</ul>
<script>
var db; //
var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB ||　window.webkitIndexedDB;
if (indexedDB) {
var app = {}
app.indexedDB = {};
app.indexedDB.db = null;
} else {
window.alert("IndexedDBが使えません");
}
app.indexedDB.open = function() {
var version = 1;
var openRequest = webkitIndexedDB.open("todoList", version);
openRequest.onupgradeneeded = function(e) {
app.indexedDB.db = e.target.result;
var store = app.indexedDB.db.createObjectStore( "todo" , { "keyPath" : "timeStamp"} );
store.createIndex("myvalueIndex" , "myvalue");
e.target.transaction.oncomplete = function() { //
app.indexedDB.getAllTodoItems();　　　　　　　//
};　　　　　　　　　　　　　　　　　　　　　　　//
}
openRequest.onsuccess = function(e) {
app.indexedDB.db = e.target.result;
app.indexedDB.getAllTodoItems();
};
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
};

app.indexedDB.deleteDB = function() {
webkitIndexedDB.deleteDatabase("todoList");
};

app.indexedDB.getAllTodoItems = function() {
var initTodoItems = $("#todoItems").html("");
var initTodoItem = $("#todoItem").val("");
var initTodovalue = $("#todovalue").val("");
var db = app.indexedDB.db;
var trans = db.transaction("todo", "readwrite");
var store = trans.objectStore("todo");
var value = document.getElementById("todovalue").value;
var cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderTodo(result.value);
result.continue();
};
};

app.indexedDB.addTodo = function() {
var db = app.indexedDB.db;
var trans = db.transaction("todo", "readwrite");var store = trans.objectStore("todo");
var todoText = $("#todoItem").val();
var todoValue = $("#todovalue").val();
if( todoText == "") return;
var data = {
"text": todoText,
"text2": todoValue,
"timeStamp": new Date().getTime()
};
var request = store.put(data);
request.onsuccess = function(e) {
app.indexedDB.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};

function renderTodo(row) {
var $todoItems = $("#todoItems");
$todoItems.append("<li>" + row.text + row.text2+"</li>");
}

app.indexedDB.getValue =function(e){
var db = app.indexedDB.db;
var key = document.getElementById("selectkey").value;
var result = document.getElementById("result");
result.innerHTML = "";
var trans = db.transaction("todo", "readwrite");
var store = trans.objectStore("todo");
var request = store.get(key);
request.onsuccess = function (e) {
if (event.target.result === undefined) {
result.innerHTML = "指定したキーは存在しません。";
} else {
result.innerHTML = e.target.result.myvalue + "<br/>";
}
}
}

function init() {
app.indexedDB.open();
}

// 読み込み実行
$(function(){
var $btnAddTodo = $("#btnAddTodo");
var $btngetValue = $("#btngetValue");
$btnAddTodo.on("click",app.indexedDB.addTodo);
$btngetValue.on("click",app.indexedDB.getValue);
init();
});
</script>
<h3>2.参照</h3>
取得したい値のキー<input type="text" id="selectkey" />
<input type="button" value="取得" id="btngetValue"/>
<h3>3.処理結果</h3>
<div id="result"/>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



indexedDBってまったく知りませんが、お勉強がてらにいじってみました。
まず最初に、ご提示のスクリプトのままでは、まったく動作しません。

せっかくプレフィックスを網羅してIDBDactoryオブジェクトを取得しているのに、その後がプレフィックス付きで処理しようとしていたり、タイポが何か所かあったり・・・が原因のようです。
そのあたりを適切に修正してみると、ご質問のような状態になりました。
「登録処理、全体の読み出し表示処理は動作するが、個別データの検索読出しができない」状態です。
（多分、ご質問の状況はこの状態だと推測）
いろいろ試してみても、event.target.resultにはundefinedしか返してこないようですね。


そこで少し調べてみましたが（ちゃんと理解してないので、ほとんど表面上だけですが…）以下を見ても、ご質問とほぼ同様の処理で記載されているようです。
https://developer.mozilla.org/ja/docs/Web/API/In …
http://www.tohoho-web.com/html5/indexed_db_api.h …

仕方がないので、大元に行ってみました。
（英語がさっぱりなのとDBの知識もないので、チンプンカンプンなのですが・・・）
http://www.w3.org/TR/IndexedDB/
(↑)の記述によると、DBからデータを取得する際にobjectStore.getではなく、objectStore.indexを介して行うような記述になっています。

そこで、この方法で試してみたところ、無事にデータを取得することができました。
（最悪の場合はcursorから順に検索する方法も一瞬考えましたが、仮にできたとしても、これではあまりにもですよね（笑）
テスト環境は、fx57、Crome63です。（IE11ではIDBDactoryが取得できず、テストできませんでした。）


以下に、追加した修正点を挙げておきます。

1）DB作成・更新時のupgradeneeded処理内で、indexを定義しておきます。例えば、
　　store.createIndex("text" , "text", { unique: true });
　とか（textを検索キーとする場合）
　なお、この処理はDB作成時かverアップ時にしか通らないので、一旦DBを削除するなどしてこの処理を実行させておく必要があるでしょう。

2）検索処理ではindexを用いて検索します。例えば
　　var trans = db.transaction("todo", "readwrite");
　　var store = trans.objectStore("todo");
　　var index = store.index("text");
　　var request = index.get(key);
といった具合です。
これで、検索後のイベント処理で結果を受け取ることができます。

ただし、ご提示のスクリプトの表示処理では
＞result.innerHTML = e.target.result.myvalue + "<br/>";
となっていますが、データのキーにはmyvalueが存在しないので、このままではundefinedが表示されるはずです。
event.target.resultは登録時のkey: value形式で、
　{ text: "hoge", text2: "hogehoge", timeStamp: 1513130816765 }
のようなオブジェクとして返されますので、textをキーに検索してtext2を表示したいのであれば
　result.innerHTML = event.target.result.text2+ "<br />";
のようにしておく必要があります。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

#1です



誤記がありました。
　×　IDBDactory
　〇　IDBFactory
でした。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報