お気に入り登録したページの一覧を表示するjavascript

11476 ワード
localStorage concrete5 concrete5 テキストリンク

ホームページにお気に入り登録機能を追加する の続編です。今回は、お気に入り登録したページの一覧を表示してみます。

一覧を取得して表示する

一覧を取得して表示するコードです。

function displayFavorites() {
    var favorite_pages = JSON.parse(localStorage.getItem('favorite_pages')); // ローカルストレージから取得する
    var title = 'title';
    var listclass = 'viewhistory';
    listdata = $("<ul></ul>",{
        class: listclass
    });
    $("#favoritelist").text('');
    if (favorite_pages) {
        $("#favoritelist").append(listdata);
        for(i=0;i<10;i++) { // 最大10個まで
            if (favorite_pages[i] && !isNaN(favorite_pages[i]['url'])) { // 要素があるかどうかの判定。(上のforと合わせてコードを改善できるかもしれない)
                textdata = $("<a></a>",{
                    href: CCM_APPLICATION_URL + '/index.php?cID=' + parseInt(favorite_pages[i]['url']),
                    text: favorite_pages[i][title]
                }); // リンクを作成
                removedata = $("<button></button>",{
                    id: parseInt(favorite_pages[i]['url']),
                    text: "お気に入りから削除する",
                    class: "btn btn-primary removedata"
                }); // お気に入りから削除するボタン
                textlist = $("<li></li>").html(textdata);
                textlist.append(removedata);
                $("#favoritelist").children('ul').append(textlist);
            }
        }
    } else {
        $("#favoritelist").text("お気に入りはありません。");
    }
}

この関数displayFavoritesを、読み込み時に実行します。

$( document ).ready(function() {
    displayFavorites();
});

htmlには下記のように記述しておきます。

<h3>お気に入りページ</h3>
<div id="favoritelist"><!-- ここにお気に入り一覧が表示される --></div>

一覧から削除する

一覧から削除するコードです。この部分は前回とよく似ています。

$(document).on("click", ".removedata", 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] && $(this).attr("id") !== favorite_pages_start[i].url) {
                favorite_pages.push(favorite_pages_start[i]);
            }
        }
    }
    localStorage.setItem('favorite_pages',JSON.stringify(favorite_pages));
    displayFavorites();
});

違いとしては、前回は今見ているページをお気に入りから削除、だったのに対して、今回はどのボタンを押したかによって削除するページが変わる点です。
削除するページは、 $(this).attr("id") でページIDを取得して判定しています。

今回のコードは、心理学のための統計入門で実際に活用しています。