ホームページにお気に入り登録機能を追加する #JavaScript

ポータルサイトやコミュニティサイト等で、お気に入りページを登録できることがありますね。自分が気になるページをチェックしておいて、後で確認しやすくする機能です。
今回、localStorageを利用してお気に入り登録機能を作ってみたので、方法を書きます。仕組みとしてはホームページに最近見たページを表示する JavaScriptに似ています。

簡易的な実装です

今回は、訪問者が自分のお気に入りを保存できて後で確認できれば良い、という要件で、簡易的に実装しています。(このページをお気に入りした人には、このページがお勧め、といった機能までは提供しない)

htmlのボタンです。

    <span class="favoritedmark fade">★</span>
    <button class="btn btn-primary addtofavorite">お気に入りに登録</button>
    <button class="btn btn-primary removefavorite hidden">お気に入りから外す</button>

お気に入りに登録されている場合　＝＞　★、お気に入りから外す
お気に入りに登録されていない場合　＝＞　お気に入りに登録

を表示する、という仕組みにしています。

まずは、お気に入りに登録するコードです。

    $(".addtofavorite").click(function(){
        var favorite_pages_start = JSON.parse(localStorage.getItem('favorite_pages'));
        var title = $("h1.page-title").text(); // ページのタイトルを取得
        if (!title.length) { // ↑が無い場合は、<head>のタイトルを取得
            title = document.title;
        }
        var favorite_pages = [{
            url: CCM_CID, // CCM_CIDは、concrete5 が各ページに付与しているID
            title: title,
            datetime: $.now()
        }];

        if(favorite_pages_start.length >= 10) { // 最大10個まで
            alert("お気に入りの登録数の上限に達しました。");
            return;
        }
        if (favorite_pages_start) {
            for(i=0;i<10;i++) { 
                if (favorite_pages_start[i] && favorite_pages[0].url !== favorite_pages_start[i].url) {
                    favorite_pages.push(favorite_pages_start[i]);
                }
            }
        }
        localStorage.setItem('favorite_pages',JSON.stringify(favorite_pages));
        addFavorite();
    });

addFavoriteは自作の関数です。画面表示を切り替える、という単純な実装です。

    function addFavorite() {
        $(".favoritedmark").removeClass('fade');
        $(".removefavorite").removeClass('hidden');
        $(".addtofavorite").addClass('hidden');
    }

お気に入りに登録されているページを外すコードです。

    $(".removefavorite").click(function(){
        var favorite_pages_start = JSON.parse(localStorage.getItem('favorite_pages'));
        var favorite_pages = [];
        if (favorite_pages_start) {
            for(i=0;i<10;i++) {
                if (favorite_pages_start[i] && CCM_CID !== favorite_pages_start[i].url) {
                    favorite_pages.push(favorite_pages_start[i]);
                }
            }
        }
        localStorage.setItem('favorite_pages',JSON.stringify(favorite_pages));
        removeFavorite();
    });

removeFavoriteは自作の関数です。画面表示を切り替える、という単純な実装です。

    function removeFavorite() {
        $(".favoritedmark").addClass('fade');
        $(".removefavorite").addClass('hidden');
        $(".addtofavorite").removeClass('hidden');
    }

最後になりますが、ページを表示したときに、既にお気に入りに登録されているかを判定するコードです。

    var favorite_pages = JSON.parse(localStorage.getItem('favorite_pages'));
    var selected = false;
    if (favorite_pages) {
        for(i=0;i<10;i++) {
            if (!selected && favorite_pages[i] && !isNaN(favorite_pages[i]['url'])) {
                if (CCM_CID == favorite_pages[i]['url']){
                    selected = true;
                }
            }
        }
    }
    if(selected) {
        addFavorite();
    }

以上で、個別ページの設定は完了です。
お気に入りに登録したページを一覧表示する設定は、後日書きますので、しばらくお待ちください。

実際に活用している事例は、石神井町：街ぶらインフォメーションや計算フォームをごらんください。