Google Apps Script試行錯誤 Blog: localStorageを使ってみる（Web Storage）

2018年12月30日日曜日

localStorageを使ってみる（Web Storage）

localStorageを利用すると、ブラウザに{ key: value }のかたちでデータを保存することができます。
そして一度開いたアプリケーションを閉じたあと、再度起動した際にその保存したデータを呼び出すことができます。
実際にそういうことがしたいと思った時に調べるとおそらくこのあたりのサイトが参考になるかと思います。

今回は参考にしたサイトにあるこの３つをGoogle Apps ScriptのHtmlServiceでやってみました

保存する
localStorage.setItem(key, value);
取得する
localStorage.getItem(key);
削除する
localStorage.removeItem(key);

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <button id='set'>setStorage</button><br>
  <button id='get'>getStorage</button><br>
  <button id='delete'>deleteStorage</button>
<script>
document.getElementById('set').onclick = setClicked;
document.getElementById('get').onclick = getClicked;
document.getElementById('delete').onclick = deleteClicked;


function setClicked() {
  var key = 'key1';
  var value = 'value1';
  var item = setStorage(key, value);
  alert(JSON.stringify(item));
}

function getClicked() {
  var key = 'key1';
  var value = getStorage(key);
  alert(value);
}

function deleteClicked() {
  var key = 'key1';
  deleteStorage(key);
  var value = getStorage(key);
  alert(value);
}

function setStorage(key, value) {
  var item = localStorage.setItem(key, value);
  return localStorage;
}

function getStorage(key) {
  var value = localStorage.getItem(key);
  return value;
}

function deleteStorage(key) {
  localStorage.removeItem(key);
}

</script>
</body>
</html>

意訳

 


localStorageに保存するボタン
localStorageから取得するボタン
localStorageを削除するボタン

setボタンがクリックされたらsetClickedを実行する
getボタンがクリックされたらgetClickedを実行する
delete'ボタンがクリックされたらdeleteClickedを実行する


この機能がやること
keyを決めて
valueを決めて
setStorageに渡して
返ってきた値をJSONに変換してアラートに出す


この機能がやること
keyを決めて
getStorageに渡して
返ってきた値をアラートに出す


この機能がやること
keyを決めて
deleteStorageに渡して
getStorageに渡してから
返ってきた値をアラートに出す


この機能がやること
受け取ったkeyとvalueをlocalStorageに保存して
返す


この機能がやること
受け取ったkeyのvalueをlocalStorageから取得して
返す


この機能がやること
受け取ったkeyのデータをlocalStorageから削除する

Webアプリケーションを開くとこのようなボタンが表示されます

「setStorage」をクリックするとこのようにsetしたkeyとvalueが表示されます

「getStorage」をクリックするとこのようにsetされているkey1の値が表示されます

「deleteStorage」をクリックするとkey1のデータが削除されてnullが返ってきます

蛇足

Google Apps ScriptにはPropertiesServiceを利用して{ key: value }の形でデータを保存して呼び出すことができますが、そんなことができると知らなかった頃はlocalStorageを使っていました。さらにそのlocalStorageを知らなかった頃は、外部のテキストファイルにデータを書き出して起動時に読み込んだりなど、手探りであの手この手を考えてやっていました。

Google Apps ScriptでHtml Serviceを使う時はPropertiesServiceを利用しているので、localStorageを使うことはなくなりましたが、ふと思い出したので試しながら書き残しておきました。

localStorageって何者なのか調べてみる