LANG SELRCT

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

2020年8月15日土曜日

localStorageのvalueを配列にして値を先頭に追加したい


MISSION 
localStorageのkeyをすべて取得する


KEY
1. JSON形式にする
保存する時にJSON形式にする
localStorage.setItem(key, JSON.stringify(values))

取得する時はオブジェクトにする
JSON.parse(values)


2. 先頭に値を追加する
values.unshift(value)
で配列の先頭にvalueを追加できる

ちなみに
values = values.unshift(value) とやると配列の要素数が返ってくる


PROCESS

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

  1. 入力ボックスに値1を入れる
  2. setをクリックする
    • localStorageに {"input_histories": [値1]} を保存する
  3. getStorageをクリックする
    • console.logに [値1] を出力する
  4. 入力ボックスに値2を入れる
  5. setをクリックする
    1. localStorageに {"input_histories": [値2, 値1]} を保存する
  6. 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>


最新の投稿

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

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