MISSION
テキストボックスの入力履歴をlocalStorageで読み書きする
KEY
- localStorageに配列を保存する
- 配列の要素数を固定する
- 配列の先頭に要素を追加する
- datalistのoptionを更新する
PROCESS
コード.gsとindex.htmlで、こういうUIを作って試してみる
- 入力ボックスに hi を入れる
- setをクリックする
- localStorageに {"input_histories": ["hi"]} を保存する
- 入力ボックスに hi をサジェストする
- 入力ボックスに hey を入れる
- setをクリックする
- localStorageに {"input_histories": ["hey", "hi"]} を保存する
- 入力ボックスに hey, hi をサジェストする
- 入力ボックスに yo を入れる
- localStorageに {"input_histories": ["yo", "hey", "hi"]} を保存する
- 入力ボックスに yo, hey, hi をサジェストする
- 入力ボックスに hello を入れる
- localStorageに {"input_histories": ["hello", "yo", "hey"]} を保存する
- 入力ボックスに hello, yo, hey をサジェストする
コード.gs function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } | 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html <!DOCTYPE html> <html> <body> <input id="tb" type="text" list="histories"> <button id="set">set</button> <button id="get">getStorage</button> <button id="delete">deleteStorage</button> <div id="data_list_div"></div> <script> /************************************ グローバル ************************************/ const limit = 3;// 履歴に表示する件数 const storageKey = "input_histories";// 今回読み書きするlocalStorageのプロパティ名 const dataListDiv = "data_list_div"; /************************************ onclick ************************************/ elem("set").onclick = setClicked; elem("get").onclick = () => getStorage(storageKey);// = function() {getStorage(storageKey);} elem("delete").onclick = () => deleteStorage(storageKey);// = function() {deleteStorage(storageKey);} /************************************ アプリ起動時に実行する ************************************/ createDatalist(getStorage(storageKey));// 入力履歴を読み込む elem("tb").focus();// 初期フォーカス /************************************ document.getElementByIdをelemで呼ぶ ************************************/ function elem(id) { return document.getElementById(id); } /************************************ setがクリックされたときの処理 ************************************/ function setClicked() { const value = elem("tb").value; setStorage(value); elem("tb").value = "";// 空に戻す elem("tb").focus();// フォカース戻す } /************************************ localStorageに保存する ************************************/ function setStorage(value) { const key = storageKey; let values = getStorage(key); if(values) { removeExisting(value, values); removeTailLimit(values); values.unshift(value);// values = values.unshift(value) とやると配列の要素数が返ってくる } else { values = [value]; } localStorage.setItem(key, JSON.stringify(values)); createDatalist(values); console.log(value + " set"); console.log(values); } /************************************ 配列内にすでに同じ値があったら削除する ************************************/ function removeExisting(value, values) { const index = values.indexOf(value); if(index !== -1) { values = values.splice(index,1); } } /************************************ 配列の要素がlimitに達している場合は、末尾を削除する ************************************/ function removeTailLimit(values) { if(values.length === limit) { values.pop(); } } /************************************ localStorageからinput_historiesの値(ここでは配列)を取得する ************************************/ function getStorage(key) { const values = localStorage.getItem(key); console.log(values); return JSON.parse(values); } /************************************ localStorageからinput_historiesを削除する ************************************/ function deleteStorage(key) { const values = getStorage(key); localStorage.removeItem(key); removeChild(dataListDiv); console.log(key + ": " + values + " deleted"); } /************************************ データリストを作成する ************************************/ function createDatalist(values) { if(values) { const parent = elem(dataListDiv); removeChild(dataListDiv); const datalist = document.createElement('datalist'); datalist.setAttribute("id", "histories"); for (let i = 0; i < values.length; i++) { const option = document.createElement('option'); option.setAttribute("value", values[i]); datalist.appendChild(option); } parent.appendChild(datalist); } } /************************************ 子要素を削除する ************************************/ function removeChild(id) { const targetElem = elem(id); for (let i = targetElem.childNodes.length - 1; i >= 0; i--) { targetElem.removeChild(targetElem.childNodes[i]); } } </script> </body> </html> |