javascript　indexeddbのindexを使った検索について

■やりたいこと
1『1登録・更新』の大分類1・中分類1・小分類1欄に任意の値を入力、設定ボタンを押して値を登録(setValue関数）
↓
2『3インデックスを使った検索』にて大分類2欄（getAllcate関数）をクリック→『4処理結果2』（id="result2"）に表示される上記1で登録した候補の中から値を選択・大分類2欄に選択値を表示（getAllcate関数）、同様に中分類2でも候補の中から値を選択し選択値を表示（getAllcate2関数）
↓
3『3インデックスを使った検索』にて数値を入力、設定ボタンを押して値を登録（copysetValue関数）
↓
4『3インデックスを使った検索』にて再度上記2操作で、大分類2、中分類2の各値を候補から選択、条件付き取得ボタンを押して大分類2・中分類2の各値にて選択した候補の条件を全て満たす値を『4処理結果2』（id="result3"）に全て表示（copygetAllvalue関数）

■問題点
1.ブラウザによって結果が異なる
（ios版chromeや同版firefoxでは上記●やりたいこと3までは動作するが、PC版同アプリでは上記●やりたいこと2で大分類2の候補の中から値選択することは出来るのですが、中分類2を選択しても『4処理結果2』に候補が表示されない。）
2.●やりたいこと4にて条件付き取得ボタンを押しても結果が『4処理結果2』に表示されない（copygetAllvalue関数でevent.target.result == nullになる）

■質問内容
PC版chromeのデベロッパーツールでは「handler took　××ms」との警告は出るのですが、エラーは見つけることが出来ませんでした。
何処を修正すれば上記■問題点１・２を修正出来るのでしょうか？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <h3>1登録・更新</h3>
  <p>大分類1：<input type="text" id="newvalue"/></p>
  <p>中分類1：<input type="text" id="newvalue2"/></p>
  <p>小分類1：<input type="text" id="newkey"/></p>
  <input type="button" value="設定" onclick="setValue()"/>

  <h3>参照</h3>
  <input type="button" value="全取得" onclick="getAll()"/>

  <h3>2処理結果</h3>
  <div id="result"></div>
<hr/>
  <h3>3インデックスを使った検索</h3>
  <form action="#">
    <p>大分類2：<input type="text" value="" readonly="readonly" name="copy" id="copy" onclick="getAllcate()"/></p>
    <p>中分類2：<input type="text" value="" readonly="readonly" name="copy" id="copyvalue2" onclick="getAllcate2()"/></p>
    <p>数値：<input type="number" id="price"/></p>
    <input type="button" value="設定" onclick="copysetValue()"/>
    <input type="button" value="全取得" onclick="copygetAll()"/>
    <input type="button" value="全取得value" onclick="copygetAllvalue()"/>
    <h3>4処理結果2
    </h3>
    <div id="result2"></div><hr>
    <div id="result3"></div><hr>
  </form>
   
</body>
<script>
  var db;
  var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB;
  if (indexedDB) {
    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});
      store.createIndex("myvalueIndexcate",["myvalue"],{unique:false,multiEntry:false});
      var store2 = db.createObjectStore("copymystore", { keyPath: "timeStamp",autoIncrement:true});
      store2.createIndex("copymyvalueIndex",["copymyvalue","copymyvalue2","price"],{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 = document.getElementById("newvalue").value;
    var value2 = 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 getAllcate(event) {
    var result = document.getElementById("result2");
    result.innerHTML = "";
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var index = store.index("myvalueIndexcate");
    var request = index.openCursor(null,"nextunique");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      var p = document.createElement("p");
      p.classList.add("txtb");
      p.setAttribute("value", data.myvalue);
      p.innerHTML = "大分類2: " + data.myvalue; 
      p.addEventListener("click", function(event){
        document.querySelector("#copy").value = event.target.getAttribute("value");
      });
      result.appendChild(p);
      cursor.continue();
    }
  }
  
  
    window.addEventListener('DOMContentLoaded', function(e){
    [].forEach.call(document.querySelectorAll('.txtb'),function(x){
      ["click","input"].forEach(function(y){x.addEventListener(y,function(e){
    var v=(x.nodeName=="INPUT")?x.value:x.textContent;
        document.querySelector('#copy').value=v;
        
      });
                                           });
    });
  });


  function getAllcate2(event) {
    var value1 = document.getElementById("copy").value;
    var result = document.getElementById("result2");
    result.innerHTML = "";
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var index = store.index("myvalueIndexcate");
    var request = index.openCursor(value1,"nextunique");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      var p = document.createElement("p");
      p.classList.add("txtm");
      p.setAttribute("value", data.myvalue2);
      p.innerHTML = "中分類2: " + data.myvalue2; 
      p.addEventListener("click", function(event){
        document.querySelector("#copyvalue2").value = event.target.getAttribute("value");
      });
      result.appendChild(p);
      cursor.continue();
    }
  }
  
  
    window.addEventListener('DOMContentLoaded', function(e){
    [].forEach.call(document.querySelectorAll('.txtm'),function(x){
      ["click","input"].forEach(function(y){x.addEventListener(y,function(e){
    var v=(x.nodeName=="INPUT")?x.value:x.textContent;
        document.querySelector('#copyvalue2').value=v;
        
      });
                                           });
    });
  });

    
  function copysetValue(event){
    var timestamp = new Date().getTime();
    var copyvalue = document.getElementById("copy").value;
    var copyvalue2 = document.getElementById("copyvalue2").value;
    var price = document.getElementById("price").value;
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
    var request = store.put({timeStamp:timestamp, copymyvalue:copyvalue, copymyvalue2:copyvalue2, price:price});
    request.onsuccess = function (event) {
      timestamp = new Date().getTime();
      document.getElementById("copy").value = "";
      document.getElementById("copyvalue2").value = "";
      document.getElementById("price").value = "";
    }
  }
  
  function copygetAll(event) {
    var result = document.getElementById("result3");
    result.innerHTML = "";
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
    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.primaryKey +"  value：" + data.copymyvalue +  "  value2：" + data.copymyvalue2 + " 数値：" + data.price + "<br>";
      cursor.continue();
    }
  }
  
  
  function copygetAllvalue(event) {
        var result = document.getElementById("result3");
    result.innerHTML = "";
   var copyvalue = document.getElementById("copy").value;
    var copyvalue2 = document.getElementById("copyvalue2").value;
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
        var index = store.index("copymyvalueIndex");
   var request = index.openCursor([copyvalue, copyvalue2],"next");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      result.innerHTML += " key："  + cursor.primaryKey +"  value：" + data.copymyvalue +  "  value2：" + data.copymyvalue2  + " 数値：" + data.price +"<br>";
      cursor.continue();
    }
  }
    
</script>
</html>

m.ts10806

2019/02/19 06:06

具体的に検証できたわけではないのでこちらに書きますが、 IndexedDBは非同期実行なのでもしかしたらそこが関係するかもしれませんね。ブラウザによって若干そこの処理に違いが出る可能性はあります。

urbainleverrier

2019/02/20 16:26

var request = index.openCursor(value1,"nextunique"); のvalue1が怪しいと思います。IDBKeyRangeで指定してみたらどうでしょうか。どうしても、解決できないようなら、IndexedDBはDexieを挟んで操作された方がわかりやすいかもしれません