LANG SELRCT

コードを書く場所についてはこちら

2018年12月30日日曜日

localStorageを使ってみる(Web Storage)


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



今回は参考にしたサイトにあるこの3つをGoogle Apps ScriptのHtmlServiceでやってみました
  1. 保存する
    localStorage.setItem(key, value);
  2. 取得する
    localStorage.getItem(key);
  3. 削除する
    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って何者なのか調べてみる
  • HTML5から使えるようになった機能
  • localStorageには2つの意味がある
    • ひとつはこの記事で書いたブラウザに保存する(Web Storage)
    • もう一つはローカルコンピュータ自体に保存する
  • Web StorageにはSession Storageというのもあって、それはブラウザを開いている間(セッション中)だけ使えて、閉じたら保存したデータは消える
  • cookieとは違う仕組みで保存する



PropertiesServiceの使い方についてもいくつか参考程度に書きました
http://www.pre-practice.net/p/contents.html#propertiesservice