回答編集履歴

1

追記

2017/02/07 16:18

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -111,3 +111,117 @@
111
111
  </html>
112
112
 
113
113
  ```
114
+
115
+ **(追記)**
116
+
117
+ ```HTML
118
+
119
+ <!DOCTYPE html>
120
+
121
+ <html lang="ja">
122
+
123
+ <head>
124
+
125
+ <meta charset="utf-8">
126
+
127
+ <title>localStorageのサンプル</title>
128
+
129
+ <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
130
+
131
+ </head>
132
+
133
+ <body>
134
+
135
+ <div id="form">
136
+
137
+ <input id="text1" type="text" size="50">
138
+
139
+ <input id="text2" type="text" size="50">
140
+
141
+ <input id="text3" type="text" size="50">
142
+
143
+ </div>
144
+
145
+
146
+
147
+
148
+
149
+ <input type="button" onClick="saveData()" value="データ保存">
150
+
151
+ <input type="button" onClick="readData()" value="データ読込">
152
+
153
+ <input type="button" onClick="delData()" value="データ削除">
154
+
155
+
156
+
157
+ <div id="list"></div>
158
+
159
+ <p id="exp_Q"></p>
160
+
161
+ <p id="exp_A"></p>
162
+
163
+ <p id="exp_I"></p>
164
+
165
+ <script>
166
+
167
+ var obj = {};
168
+
169
+ var x = 1;
170
+
171
+
172
+
173
+ function saveData() {
174
+
175
+ var text1 = $("#text1").val();
176
+
177
+ var text2 = $("#text2").val();
178
+
179
+ var text3 = $("#text3").val();
180
+
181
+
182
+
183
+ obj[x] = {
184
+
185
+ "english": text1,
186
+
187
+ "japanese": text2,
188
+
189
+ "info": text3
190
+
191
+ };
192
+
193
+ x = x + 1;
194
+
195
+ localStorage.setItem("data", JSON.stringify(obj));
196
+
197
+ }
198
+
199
+
200
+
201
+ function readData() {
202
+
203
+ // オブジェクトに戻して取得
204
+
205
+ $("#exp_Q, #exp_A, #exp_I").empty();
206
+
207
+ var object = JSON.parse(localStorage.getItem("data"));
208
+
209
+ for (var i = 0; i < Object.keys(object).length; i += 1) {
210
+
211
+ $("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", ");
212
+
213
+ $("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", ");
214
+
215
+ $("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", ");
216
+
217
+ }
218
+
219
+ }
220
+
221
+ </script>
222
+
223
+ </body>
224
+
225
+ </html>
226
+
227
+ ```