回答編集履歴
1
追記
answer
CHANGED
|
@@ -59,4 +59,71 @@
|
|
|
59
59
|
```
|
|
60
60
|
また、今回の質問内容とはあまり関係ありませんが、HTMLの書き方が少しおかしいと感じる部分がありましたので、下に書いておきます。
|
|
61
61
|
- tableタグの中にdivタグが存在する。
|
|
62
|
-
- pタグの中にtableタグが存在する。
|
|
62
|
+
- pタグの中にtableタグが存在する。
|
|
63
|
+
追記
|
|
64
|
+
---
|
|
65
|
+
```HTML
|
|
66
|
+
<!DOCTYPE html>
|
|
67
|
+
<html lang="ja">
|
|
68
|
+
<head>
|
|
69
|
+
<meta charset=utf-8>
|
|
70
|
+
<title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
|
|
71
|
+
</head>
|
|
72
|
+
<body>
|
|
73
|
+
<script>
|
|
74
|
+
var storage = localStorage;
|
|
75
|
+
var result = "";
|
|
76
|
+
var items = {
|
|
77
|
+
data1: "data2",
|
|
78
|
+
data3: "data4"
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
function addItem() {//setItem用関数
|
|
82
|
+
Object.keys(items).forEach(function (key) {
|
|
83
|
+
storage.setItem(key, items[key]);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function dataDelete(key) {
|
|
88
|
+
alert(key);
|
|
89
|
+
storage.removeItem(key);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
function dataChange(key, changeKey) {
|
|
93
|
+
dataChangeText = document.getElementById(changeKey).value;
|
|
94
|
+
if (window.confirm(localStorage[key] + "を" + dataChangeText + "に変更します。")) {
|
|
95
|
+
localStorage[key] = dataChangeText;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
window.onload = function () {
|
|
100
|
+
for (var i = 0; i < storage.length; i++) {
|
|
101
|
+
var k = storage.key(i);
|
|
102
|
+
|
|
103
|
+
result += "<form name='js'>" +
|
|
104
|
+
"<table border='1' cellspacing='0' cellpadding='0'>" +
|
|
105
|
+
"<tr>" +
|
|
106
|
+
"<td width='100'>" +
|
|
107
|
+
k +
|
|
108
|
+
"</td>" +
|
|
109
|
+
"<td width='200'>" +
|
|
110
|
+
storage.getItem(k) +
|
|
111
|
+
"</td>" +
|
|
112
|
+
"<td width='100'>" +
|
|
113
|
+
"<input id='k" + i + "' type='text' value='" + k + "'>" +
|
|
114
|
+
"<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" +
|
|
115
|
+
"<input id='change_k" + i + "' type='text' value='" + localStorage[k] + "'>" +
|
|
116
|
+
"<input type='submit' value='変更' onclick='dataChange(\"" + k + "\", \"change_k" + i + "\")'>" +
|
|
117
|
+
"</td>" +
|
|
118
|
+
"</tr>" +
|
|
119
|
+
"</table>" +
|
|
120
|
+
"</form>";
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
document.getElementById("show_result").innerHTML = result;
|
|
124
|
+
};
|
|
125
|
+
</script>
|
|
126
|
+
<div id="show_result"></div>
|
|
127
|
+
</body>
|
|
128
|
+
</html>
|
|
129
|
+
```
|