質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2098閲覧

indexeddbのopenCursorについて

tetsu777

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/10/27 23:21

編集2018/10/28 04:34

Indexeddbにてindexを使った複数の条件で検索、結果の表示をしたいのですが、上手く行きません
具体的には以下にて事前にsetValue関数で登録したキー、バリュー、バリュー2値を、getKey関数にて入力したバリュー値かつバリュー2値に一致するキー値を検索、表示したいのですが、表示されません。
別getAll関数は表示されているので、setValue関数は正常だと思うのですが、原因が分かりません。
拙い説明で申し訳ございませんが、ご教授願いします

10/28-13:33追記 chromeでは動作するようですが、iOS版Safariでは表示されませんでした。
ブラウザの問題でしょうか?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Indexed DataBase APIサンプル</title> </head> <body> <h3>登録・更新</h3> キー:<input type="text" id="newkey" /> バリュー:<input type="number" id="newvalue" /> バリュー2:<input type="number" id="newvalue2" /> <input type="button" value="設定" onclick="setValue()"/> <hr /> <h3>参照</h3> <input type="button" value="全取得" onclick="getAll()"/> <hr /> <h3>インデックスを使った検索</h3> バリュー <input type="number" id="selectValue1" />かつ バリュー2<input type="number" id="selectValue2" /> <input type="button" value="検索" onclick="getKey()"/> <hr /> <h3>処理結果</h3> <div id="result"/> </body> <script> var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; if (indexedDB) { // データベースを削除したい場合はコメントを外します。 //indexedDB.deleteDatabase("mydb"); var openRequest = indexedDB.open("mydb", 1.0); openRequest.onupgradeneeded = function(event) { // データベースのバージョンに変更があった場合(初めての場合もここを通ります。) db = event.target.result; var store = db.createObjectStore("mystore", { keyPath: "mykey",autoIncrement:true}); store.createIndex("myvalueIndex",["myvalue","myvalue2"] ,{unique:false,multiEntry:false}); } openRequest.onsuccess = function(event) { db = event.target.result; } } else { window.alert("このブラウザではIndexed DataBase API は使えません。"); } function setValue(event) { var key = document.getElementById("newkey").value; var value = Number(document.getElementById("newvalue").value); var value2 = Number(document.getElementById("newvalue2").value); var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var request = store.put({ mykey: key, myvalue: value, myvalue2: value2}); request.onsuccess = function (event) { document.getElementById("newkey").value = ""; document.getElementById("newvalue").value = ""; document.getElementById("newvalue2").value = ""; } } function getAll(event) { var result = document.getElementById("result"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var request = store.openCursor(); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; result.innerHTML += "key:" + cursor.key + " value:" + data.myvalue + " value2:" + data.myvalue2 +"<br/>"; cursor.continue(); } } function getKey(event) { var value1 = Number(document.getElementById("selectValue1").value); var value2 = Number(document.getElementById("selectValue2").value); var result = document.getElementById("result"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var index = store.index("myvalueIndex"); // var range = IDBKeyRange.bound(value1, value2); //var request = index.openCursor(range); var request = index.openCursor([value1,value2],"next"); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; result.innerHTML += "value:" + data.myvalue + "value2:" + data.myvalue2 + " key:" + data.mykey + "<br/>"; cursor.continue(); } } </script> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/10/28 02:12

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tetsu777

2018/10/28 04:32

早速のご回答ありがとうございます。chromeでは動作するようですが、iOS版Safariでは表示されませんでした。ブラウザの問題でしょうか?
guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/j6ca89b4/

とりあえず動いているように見えます。

  1. 追加の箇所で1 1 1と入れる
  2. 追加ボタンを押す
  3. 検索の箇所で1 1と入れる
  4. 検索ボタンを押す

上記の操作で value:1value2:1 key:1 が出ます。

投稿2018/10/28 03:16

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問