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>
|
