MISSION
localStorageのkeyをすべて取得する
KEY
1. JSON形式にする
保存する時にJSON形式にする
localStorage.setItem(key, JSON.stringify(values))
取得する時はオブジェクトにする
JSON.parse(values)
2. 先頭に値を追加する
values.unshift(value)
values.unshift(value)
で配列の先頭にvalueを追加できる
ちなみに
values = values.unshift(value) とやると配列の要素数が返ってくる
PROCESS
コード.gsとindex.htmlで、こういうUIを作って試してみる
PROCESS
コード.gsとindex.htmlで、こういうUIを作って試してみる
- 入力ボックスに値1を入れる
- setをクリックする
- localStorageに {"input_histories": [値1]} を保存する
- getStorageをクリックする
- console.logに [値1] を出力する
- 入力ボックスに値2を入れる
- setをクリックする
- localStorageに {"input_histories": [値2, 値1]} を保存する
- deleteをクリックする
- {"input_histories": [値2, 値1]}を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="get">getStorage</button> <button id="delete">deleteStorage</button> <script> elem("set").onclick = setClicked; elem("get").onclick = getStorage; elem("delete").onclick = deleteStorage; function elem(id) { return document.getElementById(id); } function setClicked() { const value = elem("tb").value; setStorage(value); elem("tb").value = ""; console.log(value + " set"); } function setStorage(value) { const key = "input_histories"; let values = getStorage(); if(values) { values.unshift(value);// values = values.unshift(value) とやると配列の要素数が返ってくる } else { values = [value]; } localStorage.setItem(key, JSON.stringify(values)); } function getStorage() { const values = localStorage.getItem("input_histories"); console.log(values); return JSON.parse(values); } function deleteStorage() { const key = "input_histories"; localStorage.removeItem(key); console.log(key + " deleted"); } </script> </body> </html> |