【GoogleChrome】localStorageを使って表示状態を保存可能にした

概要

GoogleChromeの拡張機能を作る企画第2.5弾です。前回はこちら。
以前実装したブックマーク一覧表示のアコーディオン表示の開閉状態を保存して、
次回表示時に復元できるようにしました。

コード

githubにコードを上げています。
https://github.com/mkt120/BookmarkListNewTab

LocalStorage

以下を参考に実装しました。
WebStorage API(LocalStorage)を使ってみた

key&value(String限定)形式で持てる設定ファイルってイメージです。
追加したのは大きく二か所

アコーディオン開閉時

クリックによるアコーディオンの開閉時に、localStorageに開閉状態を保持させるようにしました。

newtab.js

parentDiv.addEventListener("click", function(){
  var element = parentDiv.getElementsByClassName(CLASS_BOOKMARK_TITLE_ICON_VIEW)[0];
  var isOpen;
  if (childViews.style.display != "none") {
    // 開いている状態 クローズする  
    isOpen = 'false';
    element.innerHTML = TITLE_VIEW_ICON_OPEN;
    childViews.style.display = "none";
  } else {
    // 閉じている状態 オープンする
    isOpen = 'true';
    element.innerHTML = TITLE_VIEW_ICON_CLOSE;
    childViews.style.display = "";
 }
 var id = parentDiv.getAttribute('id');
 localStorage[id] = isOpen;
);

View生成時

View生成時にローカルストレージを参照して開閉状態を取得、表示状態に反映させるようにしました。

newtab.js

// localStorageから開閉状態を取得し、表示に反映
var isOpen = localStorage[id];
if (isOpen == 'true') {
  childViews.style.display = "";
} else {
  childViews.style.display = "none";
}

これで画面再表示時に、前回の表示状態が復元されるようになりました。

最後に

Android Javaしか書けない私なので、HTMLとかCSSとかJavascriptの勉強も兼ねてですが、
将来的にはiGoogleの機能を独自実装できるようになることを目指しています。