Edited at

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

More than 1 year has passed since last update.


概要

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の機能を独自実装できるようになることを目指しています。