indexedDBで複数キーの同時登録
下記のindexedDBは、MYID,PASSW,MYID2,PASSW2,MAILADD の5項目をindexedDBに登録、更新することができます。
javascript
1 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"/> 6 <title>Indexed DataBase</title> 7</head> 8<body> 9 <h3>登録・更新</h3> 10 キー:<input type="text" id="newkey" value="MYID" /> 11 バリュー:<input type="newkey" id="newvalue" /> 12 <input type="button" value="MYID設定" onclick="setValue()"/> 13 14<BR> 15 16 キー:<input type="text" id="newkey2" value="PASSW" /> 17 バリュー:<input type="text" id="newvalue2" /> 18 <input type="button" value="PASSW設定" onclick="setValue2()"/> 19<BR> 20 キー:<input type="text" id="newkey3" value="MYID2" /> 21 バリュー:<input type="text" id="newvalue3" /> 22 <input type="button" value="MYID2設定" onclick="setValue3()"/> 23 24<BR> 25 キー:<input type="text" id="newkey4" value="PASSW2" /> 26 バリュー:<input type="text" id="newvalue4" /> 27 <input type="button" value="PASSW2設定" onclick="setValue4()"/> 28 29 30<BR> 31 キー:<input type="text" id="newkey5" value="MAILADD" /> 32 バリュー:<input type="text" id="newvalue5" /> 33 <input type="button" value="MAILADD設定" onclick="setValue5()"/> 34 35 36 <h3>参照</h3> 37 取得したい値のキー<input type="text" id="selectkey" /> 38 <input type="button" value="取得" onclick="getValue()"/> 39 <input type="button" value="全取得" onclick="getAll()"/> 40 <input type="button" value="件数表示" onclick="getCount()"/> 41 <hr /> 42 43 44 <h3>処理結果</h3> 45 <div id="result"/> 46</body> 47<script> 48 var db; 49 var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; 50 if (indexedDB) { 51 // データベースを削除したい場合はコメントを外します。 52 //indexedDB.deleteDatabase("mydb"); 53 var openRequest = indexedDB.open("mydb", 1.0); 54 55 openRequest.onupgradeneeded = function(event) { 56 // データベースのバージョンに変更があった場合(初めての場合もここを通ります。) 57 db = event.target.result; 58 var store = db.createObjectStore("mystore", { keyPath: "mykey"}); 59 store.createIndex("myvalueIndex", "myvalue"); 60 } 61 62 openRequest.onsuccess = function(event) { 63 db = event.target.result; 64 } 65 } else { 66 window.alert("このブラウザではIndexed DataBase API は使えません。"); 67 } 68 69 function setValue(event) { 70 var key = document.getElementById("newkey").value; 71 var value = Number(document.getElementById("newvalue").value); 72 73 var transaction = db.transaction(["mystore"], "readwrite"); 74 var store = transaction.objectStore("mystore"); 75 76 var request = store.put({ mykey: key, myvalue: value}); 77 request.onsuccess = function (event) { 78 document.getElementById("newkey").value = ""; 79 document.getElementById("newvalue").value = ""; 80 } 81 } 82 83 84 function setValue2(event) { 85 var key2 = document.getElementById("newkey2").value; 86 var value2 = Number(document.getElementById("newvalue2").value); 87 88 var transaction = db.transaction(["mystore"], "readwrite"); 89 var store = transaction.objectStore("mystore"); 90 91 var request = store.put({ mykey: key2, myvalue: value2}); 92 request.onsuccess = function (event) { 93 document.getElementById("newkey2").value = ""; 94 document.getElementById("newvalue2").value = ""; 95 } 96 } 97 98 99 function setValue3(event) { 100 var key3 = document.getElementById("newkey3").value; 101 var value3 = Number(document.getElementById("newvalue3").value); 102 103 var transaction = db.transaction(["mystore"], "readwrite"); 104 var store = transaction.objectStore("mystore"); 105 106 var request = store.put({ mykey: key3, myvalue: value3}); 107 request.onsuccess = function (event) { 108 document.getElementById("newkey3").value = ""; 109 document.getElementById("newvalue3").value = ""; 110 } 111 } 112 113 114 function setValue4(event) { 115 var key4 = document.getElementById("newkey4").value; 116 var value4 = Number(document.getElementById("newvalue4").value); 117 118 var transaction = db.transaction(["mystore"], "readwrite"); 119 var store = transaction.objectStore("mystore"); 120 121 var request = store.put({ mykey: key4, myvalue: value4}); 122 request.onsuccess = function (event) { 123 document.getElementById("newkey4").value = ""; 124 document.getElementById("newvalue4").value = ""; 125 } 126 } 127 128 129 function setValue5(event) { 130 var key5 = document.getElementById("newkey5").value; 131 var value5 = Number(document.getElementById("newvalue5").value); 132 133 var transaction = db.transaction(["mystore"], "readwrite"); 134 var store = transaction.objectStore("mystore"); 135 136 var request = store.put({ mykey: key5, myvalue: value5}); 137 request.onsuccess = function (event) { 138 document.getElementById("newkey5").value = ""; 139 document.getElementById("newvalue5").value = ""; 140 } 141 } 142 143 144 145 146 147 148 149 150 function getValue(event) { 151 var key = document.getElementById("selectkey").value; 152 var result = document.getElementById("result"); 153 result.innerHTML = ""; 154 155 var transaction = db.transaction(["mystore"], "readwrite"); 156 var store = transaction.objectStore("mystore"); 157 158 var request = store.get(key); 159 request.onsuccess = function (event) { 160 161 if (event.target.result === undefined) { 162 result.innerHTML = "指定したキーは存在しません。"; 163 } else { 164 result.innerHTML = event.target.result.myvalue + "<br/>"; 165 } 166 } 167 } 168 169 function getAll(event) { 170 171 var result = document.getElementById("result"); 172 result.innerHTML = ""; 173 174 var transaction = db.transaction(["mystore"], "readwrite"); 175 var store = transaction.objectStore("mystore"); 176 var request = store.openCursor(); 177 178 request.onsuccess = function (event) { 179 180 if(event.target.result == null) { 181 return; 182 } 183 184 var cursor = event.target.result; 185 var data = cursor.value; 186 result.innerHTML += "key:" + cursor.key + " value:" + data.myvalue + "<br/>"; 187 188 cursor.continue(); 189 } 190 } 191 192 function getCount(event) { 193 194 var result = document.getElementById("result"); 195 result.innerHTML = ""; 196 197 var transaction = db.transaction(["mystore"], "readwrite"); 198 var store = transaction.objectStore("mystore"); 199 var request = store.count(); 200 201 request.onsuccess = function (event) { 202 result.innerHTML = event.target.result + "件"; 203 } 204 } 205 206 207 208 function getKey(event) { 209 210 var value1 = Number(document.getElementById("selectValue1").value); 211 var value2 = Number(document.getElementById("selectValue2").value); 212 213 var result = document.getElementById("result"); 214 result.innerHTML = ""; 215 216 var transaction = db.transaction(["mystore"], "readwrite"); 217 var store = transaction.objectStore("mystore"); 218 var index = store.index("myvalueIndex"); 219 220 var range = IDBKeyRange.bound(value1, value2); 221 var request = index.openCursor(range); 222 223 request.onsuccess = function (event) { 224 225 if(event.target.result == null) { 226 return; 227 } 228 229 var cursor = event.target.result; 230 var data = cursor.value; 231 result.innerHTML += "value:" + data.myvalue + " key:" + data.mykey + "<br/>"; 232 233 cursor.continue(); 234 } 235 } 236 237</script> 238</html> 239 240 241
困っていること。
この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回で登録を済ませたい)
対策案
javascriptの中に、
setValue100(event)
を新たに作ります。
javascript
1 2 function setValue100(event) { 3 var key = document.getElementById("newkey").value; 4 var value = Number(document.getElementById("newvalue").value); 5 var key2 = document.getElementById("newkey2").value; 6 var value2 = Number(document.getElementById("newvalue2").value); 7 var key3 = document.getElementById("newkey3").value; 8 var value3 = Number(document.getElementById("newvalue3").value); 9 var key4 = document.getElementById("newkey4").value; 10 var value4 = Number(document.getElementById("newvalue4").value); 11 var key5 = document.getElementById("newkey5").value; 12 var value5 = Number(document.getElementById("newvalue5").value); 13 14 var transaction = db.transaction(["mystore"], "readwrite"); 15 var store = transaction.objectStore("mystore"); 16 17 var request = store.put({ mykey: key, myvalue: value}); 18 request.onsuccess = function (event) { 19 document.getElementById("newkey").value = ""; 20 document.getElementById("newvalue").value = ""; 21 document.getElementById("newkey2").value = ""; 22 document.getElementById("newvalue2").value = ""; 23 document.getElementById("newkey3").value = ""; 24 document.getElementById("newvalue3").value = ""; 25 document.getElementById("newkey4").value = ""; 26 document.getElementById("newvalue4").value = ""; 27 document.getElementById("newkey5").value = ""; 28 document.getElementById("newvalue5").value = ""; 29 30 } 31 } 32
上記のような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});
上記の失敗例を試したのですが、動きません。
どうすればいいかご教示いただきたくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/31 07:00