質問編集履歴

1 読みやすくした

tajix_japan

tajix_japan score 97

2017/12/31 14:17  投稿

indexedDBで複数キーの同時登録
indexedDBで複数キーの同時登録
下記のindexedDBは、MYID,PASSW,MYID2,PASSW2,MAILADD の5項目をindexedDBに登録、更新することができます。
```javascript
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Indexed DataBase</title>
</head>
<body>
 <h3>登録・更新</h3>
 キー:<input type="text" id="newkey" value="MYID" />
 バリュー:<input type="newkey" id="newvalue" />
 <input type="button" value="MYID設定" onclick="setValue()"/>
<BR>
 キー:<input type="text" id="newkey2" value="PASSW" />
 バリュー:<input type="text" id="newvalue2" />
 <input type="button" value="PASSW設定" onclick="setValue2()"/>
<BR>
 キー:<input type="text" id="newkey3" value="MYID2" />
 バリュー:<input type="text" id="newvalue3" />
 <input type="button" value="MYID2設定" onclick="setValue3()"/>
<BR>
 キー:<input type="text" id="newkey4" value="PASSW2"  />
 バリュー:<input type="text" id="newvalue4" />
 <input type="button" value="PASSW2設定" onclick="setValue4()"/>
<BR>
 キー:<input type="text" id="newkey5" value="MAILADD"  />
 バリュー:<input type="text" id="newvalue5" />
 <input type="button" value="MAILADD設定" onclick="setValue5()"/>
 <h3>参照</h3>
 取得したい値のキー<input type="text" id="selectkey" />
 <input type="button" value="取得" onclick="getValue()"/>
 <input type="button" value="全取得" onclick="getAll()"/>
 <input type="button" value="件数表示" onclick="getCount()"/>
 <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"});
     store.createIndex("myvalueIndex", "myvalue");
   }
   
   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 transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.put({ mykey: key, myvalue: value});
   request.onsuccess = function (event) {
     document.getElementById("newkey").value = "";
     document.getElementById("newvalue").value = "";
   }
 }
 function setValue2(event) {
   var key2 = document.getElementById("newkey2").value;
   var value2 = Number(document.getElementById("newvalue2").value);
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.put({ mykey: key2, myvalue: value2});
   request.onsuccess = function (event) {
     document.getElementById("newkey2").value = "";
     document.getElementById("newvalue2").value = "";
   }
 }
 function setValue3(event) {
   var key3 = document.getElementById("newkey3").value;
   var value3 = Number(document.getElementById("newvalue3").value);
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.put({ mykey: key3, myvalue: value3});
   request.onsuccess = function (event) {
     document.getElementById("newkey3").value = "";
     document.getElementById("newvalue3").value = "";
   }
 }
 function setValue4(event) {
   var key4 = document.getElementById("newkey4").value;
   var value4 = Number(document.getElementById("newvalue4").value);
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.put({ mykey: key4, myvalue: value4});
   request.onsuccess = function (event) {
     document.getElementById("newkey4").value = "";
     document.getElementById("newvalue4").value = "";
   }
 }
 function setValue5(event) {
   var key5 = document.getElementById("newkey5").value;
   var value5 = Number(document.getElementById("newvalue5").value);
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.put({ mykey: key5, myvalue: value5});
   request.onsuccess = function (event) {
     document.getElementById("newkey5").value = "";
     document.getElementById("newvalue5").value = "";
   }
 }
 
 function getValue(event) {
   var key = document.getElementById("selectkey").value;
   var result = document.getElementById("result");
   result.innerHTML = "";
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   
   var request = store.get(key);
   request.onsuccess = function (event) {
   
     if (event.target.result === undefined) {
       result.innerHTML = "指定したキーは存在しません。";
     } else {
       result.innerHTML = event.target.result.myvalue + "<br/>";
     }
   }
 }
 
 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 + "<br/>";
     
     cursor.continue();
   }
 }
 
 function getCount(event) {
 
   var result = document.getElementById("result");
   result.innerHTML = "";
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   var request = store.count();
   
   request.onsuccess = function (event) {
     result.innerHTML = event.target.result + "件";
   }
 }
 
 
 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);
   
   request.onsuccess = function (event) {
   
     if(event.target.result == null) {
       return;
     }
     
     var cursor = event.target.result;
         var data = cursor.value;
     result.innerHTML += "value:" + data.myvalue + " key:" + data.mykey + "<br/>";
     
     cursor.continue();
   }
 }
</script>
</html>
```
困っていること。
この5項目登録のためには、
 
 <input type="button" value="MYID設定" onclick="setValue()"/>
 <input type="button" value="PASSW設定" onclick="setValue2()"/>
 <input type="button" value="MYID2設定" onclick="setValue3()"/>
 <input type="button" value="PASSW2設定" onclick="setValue4()"/>
 <input type="button" value="MAILADD設定" onclick="setValue5()"/>
のボタンをひとつづつ押していって初めて全ての登録が完了します。
の5つのボタンをひとつづつ押していって初めて全ての登録が完了します。
この5回の登録ボタンを1回で済ませたいというのが趣旨となります。
(下記のような全設定ボタンを新たに作り1回で登録を済ませたい)  
 
 <input type="button" value="全設定" onclick="setValue100()"/>
対策案  
 
javascriptの中に、  
setValue100(event)
の部分を下記のように書いたときに
を新たに作ります。
```javascript
 function setValue100(event) {
   var key = document.getElementById("newkey").value;
   var value = Number(document.getElementById("newvalue").value);
   var key2 = document.getElementById("newkey2").value;
   var value2 = Number(document.getElementById("newvalue2").value);
   var key3 = document.getElementById("newkey3").value;
   var value3 = Number(document.getElementById("newvalue3").value);
   var key4 = document.getElementById("newkey4").value;
   var value4 = Number(document.getElementById("newvalue4").value);
   var key5 = document.getElementById("newkey5").value;
   var value5 = Number(document.getElementById("newvalue5").value);
   
   var transaction = db.transaction(["mystore"], "readwrite");
   var store = transaction.objectStore("mystore");
   var request = store.put({ mykey: key, myvalue: value});
   request.onsuccess = function (event) {
     document.getElementById("newkey").value = "";
     document.getElementById("newvalue").value = "";
     document.getElementById("newkey2").value = "";
     document.getElementById("newvalue2").value = "";
     document.getElementById("newkey3").value = "";
     document.getElementById("newvalue3").value = "";
     document.getElementById("newkey4").value = "";
     document.getElementById("newvalue4").value = "";
     document.getElementById("newkey5").value = "";
     document.getElementById("newvalue5").value = "";
   }
 }
```
上記のようなsetValue100(event)を新たに作った時に、  
 
   var request = store.put({ mykey: key, myvalue: value});
をどう書くかがカギとなるのだと思いますが、書き方がわかりません。
をどう書き換えるかがカギとなるのだと思いますが、書き方がわかりません。
失敗例
その1
   var request = store.put({ mykey: key,key2,key3,key4,key5, myvalue: value,value2,value3,value4,value5});
その2  
   var request = store.put({ mykey: key, myvalue: value},{ mykey: key2, myvalue: value2},{ mykey: key3, myvalue: value3},{ mykey: key4, myvalue: value4},{ mykey: key5, myvalue: value5});
などを試したのですが、動きません。
上記の失敗例を試したのですが、動きません。
どうすればいいかご教示いただきたくお願いいたします。
  • JavaScript

    37484 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る