LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年8月15日土曜日

テキストボックスの入力履歴をlocalStorageで読み書きしたい


MISSION 
テキストボックスの入力履歴をlocalStorageで読み書きする


KEY
  • localStorageに配列を保存する
  • 配列の要素数を固定する
  • 配列の先頭に要素を追加する
  • datalistのoptionを更新する


PROCESS

コード.gsとindex.htmlで、こういうUIを作って試してみる

  1. 入力ボックスに hi を入れる
  2. setをクリックする
    • localStorageに {"input_histories": ["hi"]} を保存する
    • 入力ボックスに hi をサジェストする
  3. 入力ボックスに hey を入れる
  4. setをクリックする
    • localStorageに {"input_histories": ["hey", "hi"]} を保存する
    • 入力ボックスに hey, hi をサジェストする
  5. 入力ボックスに yo を入れる
    • localStorageに {"input_histories": ["yo", "hey", "hi"]} を保存する
    • 入力ボックスに yo, hey, hi をサジェストする
  6. 入力ボックスに 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>


最新の投稿

Googleドライブ内のフォルダ名とidを取得したい

MISSION Googleドライブ内のフォルダ名とidを取得する 以下のコード.gsでfolderIdを指定してgetFilesInFolder()を実行すると 指定したフォルダ内のファイル名とidがログに出力されます。 コード.gs function getF...