MISSION
localStorageのkeyをすべて取得する
KEY
Object.keys(localStorage)
でlocalStorageのkeyを取得できる
PROCESS
コード.gsとindex.htmlで、こういうUIを作って試してみる
PROCESS
コード.gsとindex.htmlで、こういうUIを作って試してみる
- 入力ボックスに値を入れる
- setをクリックする
- localStorageに {値:日時} を保存する
- getKeysをクリックする
- console.logに [値, 日時] を出力する
- localStorageから削除したい値を入れる
- deleteKeysをクリックする
- 入力した値のデータ(プロパティ)をlocalStorageから削除する
コード.gs function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html <!DOCTYPE html>
<html>
<body>
<input id="tb" type="text">
<button id="set">set</button>
<button id="getKeys">getKeys</button>
<button id="deleteKeys">deleteStorage</button>
<script>
elem("set").onclick = setClicked;
elem("getKeys").onclick = getkeys;
elem("deleteKeys").onclick = deleteStorage;
function elem(id) {
return document.getElementById(id);
}
function setClicked() {
const key = elem("tb").value;
const datetime = new Date();
setStorage(key, datetime);
elem("tb").value = "";
console.log(key + " set");
}
function setStorage(key, value) {
const item = localStorage.setItem(key, value);
}
function getkeys() {
const keys = Object.keys(localStorage);
for(let i = 0; i < localStorage.length; i++) {
const key = keys[i];
const datetime = localStorage.getItem(key)
console.log([key, datetime]);
}
}
function deleteStorage() {
const key = elem("tb").value;
localStorage.removeItem(key);
console.log(key + " deleted");
}
</script>
</body>
</html>
|
