質問編集履歴
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
```
|
|
21
|
+
|
|
21
22
|
<!DOCTYPE html>
|
|
22
23
|
<html>
|
|
23
24
|
<head>
|
|
@@ -29,26 +30,22 @@
|
|
|
29
30
|
<p>中分類：<input type="text" id="newvalue2" placeholder="バリュー2"/></p>
|
|
30
31
|
<p>小分類：<input type="text" id="newkey" placeholder="キー"/></p>
|
|
31
32
|
<input type="button" value="設定" onclick="setValue()"/>
|
|
32
|
-
|
|
33
|
+
<!--
|
|
33
34
|
<h3>参照</h3>
|
|
34
35
|
<input type="button" value="全取得" onclick="getAll()"/>
|
|
35
|
-
|
|
36
|
+
-->
|
|
36
|
-
|
|
37
|
+
<h3>2処理結果</h3>
|
|
37
38
|
<div id="result"></div>
|
|
38
|
-
|
|
39
39
|
<hr/>
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
<h3>3インデックスを使った検索</h3>
|
|
42
41
|
<form action="#">
|
|
43
42
|
<p>大分類：<input type="text" value="" readonly="readonly" name="copy" id="copy" onclick="getAllcate()" placeholder="バリュー"/></p>
|
|
44
43
|
<p>中分類：<input type="text" id="copyvalue2" placeholder="バリュー2"/></p>
|
|
45
44
|
<p>小分類：<input type="text" id="copykey" placeholder="キー"/></p>
|
|
46
|
-
<!--
|
|
45
|
+
<!-- <input type="button" value="設定" onclick="copysetValue()"/>-->
|
|
47
|
-
-->
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
<h3>4処理結果2
|
|
50
|
-
|
|
47
|
+
</h3>
|
|
51
|
-
|
|
48
|
+
<div id="result2"></div>
|
|
52
49
|
</form>
|
|
53
50
|
|
|
54
51
|
</body>
|
|
@@ -58,43 +55,35 @@
|
|
|
58
55
|
if (indexedDB) {
|
|
59
56
|
// データベースを削除したい場合はコメントを外します。
|
|
60
57
|
// indexedDB.deleteDatabase("mydb");
|
|
61
|
-
|
|
62
58
|
var openRequest = indexedDB.open("mydb", 1.0);
|
|
63
|
-
|
|
64
59
|
openRequest.onupgradeneeded = function(event) {
|
|
65
60
|
// データベースのバージョンに変更があった場合(初めての場合もここを通ります。)
|
|
66
61
|
db = event.target.result;
|
|
67
|
-
var store = db.createObjectStore("mystore", { keyPath: "mykey"
|
|
62
|
+
var store = db.createObjectStore("mystore", { keyPath: "mykey",autoIncrement:true});
|
|
68
|
-
,autoIncrement:true
|
|
69
|
-
});
|
|
70
|
-
|
|
63
|
+
store.createIndex("myvalueIndex",["myvalue","myvalue2"],{unique:false,multiEntry:false});
|
|
71
|
-
,{unique:false,multiEntry:false}
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
|
|
64
|
+
store.createIndex("myvalueIndexcate",["myvalue"],{unique:false,multiEntry:false});
|
|
75
65
|
}
|
|
76
66
|
openRequest.onsuccess = function(event) {
|
|
77
|
-
|
|
67
|
+
db = event.target.result;
|
|
78
|
-
|
|
68
|
+
}
|
|
79
69
|
} else {
|
|
80
70
|
window.alert("このブラウザではIndexed DataBase API は使えません。");
|
|
81
71
|
}
|
|
82
|
-
|
|
72
|
+
|
|
83
73
|
function setValue(event) {
|
|
84
74
|
var key = document.getElementById("newkey").value;
|
|
85
75
|
var value = document.getElementById("newvalue").value;
|
|
86
|
-
|
|
76
|
+
var value2 = document.getElementById("newvalue2").value;
|
|
87
77
|
var transaction = db.transaction(["mystore"], "readwrite");
|
|
88
78
|
var store = transaction.objectStore("mystore");
|
|
89
79
|
var request = store.put({ mykey: key, myvalue: value, myvalue2: value2});
|
|
90
80
|
request.onsuccess = function (event) {
|
|
91
81
|
document.getElementById("newkey").value = "";
|
|
92
82
|
document.getElementById("newvalue").value = "";
|
|
93
|
-
|
|
83
|
+
document.getElementById("newvalue2").value = "";
|
|
94
84
|
}
|
|
95
85
|
}
|
|
96
|
-
|
|
97
|
-
|
|
86
|
+
|
|
98
87
|
function getAll(event) {
|
|
99
88
|
var result = document.getElementById("result");
|
|
100
89
|
result.innerHTML = "";
|
|
@@ -106,46 +95,39 @@
|
|
|
106
95
|
return;
|
|
107
96
|
}
|
|
108
97
|
var cursor = event.target.result;
|
|
109
|
-
|
|
98
|
+
var data = cursor.value;
|
|
110
|
-
result.innerHTML += "<table border='1'><td>"+"key：" + cursor.key + "</td>" +"<td>"+"value：" + data.myvalue + " value2：" + data.myvalue2 +"</td></table>";
|
|
99
|
+
result.innerHTML += "<table border='1'><td>"+"key：" + cursor.key + "</td>" +"<td>"+"value：" + data.myvalue + " value2：" + data.myvalue2 +"</td></table>";
|
|
111
100
|
cursor.continue();
|
|
112
|
-
|
|
113
101
|
}
|
|
114
102
|
}
|
|
115
|
-
|
|
103
|
+
|
|
116
|
-
|
|
104
|
+
function getAllcate(event) {
|
|
117
|
-
|
|
105
|
+
var result = document.getElementById("result2");
|
|
118
106
|
result.innerHTML = "";
|
|
119
107
|
var transaction = db.transaction(["mystore"], "readwrite");
|
|
120
108
|
var store = transaction.objectStore("mystore");
|
|
121
109
|
var index = store.index("myvalueIndexcate");
|
|
122
|
-
|
|
110
|
+
var request = index.openCursor(null,"nextunique");
|
|
123
111
|
request.onsuccess = function (event) {
|
|
124
|
-
|
|
112
|
+
if(event.target.result == null) {
|
|
125
|
-
|
|
113
|
+
return;
|
|
126
|
-
|
|
114
|
+
}
|
|
127
115
|
var cursor = event.target.result;
|
|
128
|
-
|
|
116
|
+
var data = cursor.value;
|
|
129
|
-
|
|
117
|
+
result.innerHTML += "<p class='txt' value='data.myvalue'>" + '大分類: ' +data.myvalue +"</p>";
|
|
130
118
|
cursor.continue();
|
|
131
|
-
|
|
132
119
|
}
|
|
133
120
|
}
|
|
134
121
|
|
|
135
|
-
|
|
136
|
-
window.addEventListener('DOMContentLoaded', function(e){
|
|
122
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
137
|
-
|
|
123
|
+
[].forEach.call(document.querySelectorAll('.txt'),function(x){
|
|
138
|
-
|
|
124
|
+
["click","input"].forEach(function(y){x.addEventListener(y,function(e){
|
|
139
|
-
x.addEventListener(y,function(e){
|
|
140
|
-
|
|
125
|
+
var v=(x.nodeName=="INPUT")?x.value:x.textContent;
|
|
141
126
|
document.querySelector('#copy').value=v;
|
|
142
127
|
});
|
|
128
|
+
});
|
|
143
129
|
});
|
|
144
130
|
});
|
|
145
|
-
});
|
|
146
131
|
</script>
|
|
147
|
-
|
|
148
|
-
|
|
149
132
|
</html>
|
|
150
|
-
|
|
151
133
|
```
|