以下の①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>
No.1ベストアンサー
- 回答日時:
こんにちは
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 />";
のようにしておく必要があります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
javaScriptのコードの修正をお...
-
C#OpenCv V4にのエラーに関する...
-
GASでGoogleフォームの自動返信...
-
ASP.NET MVCでObjectをjsに渡す
-
javascriptでiframeのURL変更は?
-
JavaScriptでテーブル内?に矢...
-
「続きを読む」ボタンを押すと...
-
メールフォームの日付入力フォ...
-
ASP.NETのコントロールの値をJa...
-
javascriptで指定した日時にリ...
-
jqGridについて
-
Strutsで半角英数字1文字以上
-
javascriptでテーブルに追加し...
-
ジェネレーターの作り方
-
明日・明後日・明々後日
-
自分のwebページにtwitterのつ...
-
C# 演算 奇数と偶数 表現の仕方
-
IE8で種類が一致しませんとエラ...
-
JavaScript でのリアルタイム時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報