Localstorage BMK

Penjelasan Kode JavaScript: Mengelola Favorit dengan LocalStorage

Pada artikel ini, kita akan membahas beberapa fungsi JavaScript yang digunakan untuk mengelola daftar favorit yang disimpan di localStorage. Kode ini berfungsi untuk menampilkan jumlah favorit, ikon bookmark, dan memuat daftar favorit lengkap di antarmuka pengguna.

1. Fungsi updateFavoriteCountAndIcon()

function updateFavoriteCountAndIcon() {
let favorites = JSON.parse(localStorage.getItem('lmydfavorites')) || [];
let favoriteCount = favorites.length;

let favoriteCountDisplay = $("#favorite-count");
let favoriteNumberDisplay = $("#favorite-number");

if (favoriteCount > 0) {
favoriteCountDisplay.show();
favoriteNumberDisplay.text(favoriteCount).show();
$("#favorite-icon").html('<svg class="bmkIcon-zis" fill="currentColor" id="favorite-icon"><use href="#bmk"/></svg>');
} else {
favoriteCountDisplay.show();
favoriteNumberDisplay.hide();
$("#favorite-icon").html('<svg class="bmkIcon-zis" fill="none" id="favorite-icon"><use href="#bmk"/></svg>');
}
}

Fungsi ini digunakan untuk memperbarui tampilan jumlah favorit dan ikon bookmark di antarmuka pengguna.

• Data favorit diambil dari localStorage dan jumlahnya dihitung.
• Jika ada item favorit, jumlah ditampilkan dan ikon bookmark diperbarui dengan tampilan "terisi".
• Jika tidak ada item favorit, ikon bookmark diperbarui dengan tampilan "kosong" dan angka jumlah disembunyikan.

2. Fungsi loadFullFavorites()

function loadFullFavorites() {
let favorites = JSON.parse(localStorage.getItem('lmydfavorites')) || [];
let fullFavoriteList = $('#full-favorite-list');
fullFavoriteList.html('');

if (favorites.length === 0) {
$('#favorite-table-container').hide();
$('#no-favorites-message').show();
} else {
$('#no-favorites-message').hide();
$('#favorite-table-container').show();

favorites.forEach((item, index) => {
let row = $('<tr>');
row.append($('<td>').addClass("text-center align-middle").text(index + 1));
let imgCell = $('<td>').addClass("text-center align-middle");
let imageLink = $('<a>').attr({ href: item.link, target: "_blank" });
let imgElement = $('<img>').addClass("img-fluid rounded-1").css({ height: "50px", width: "80px" }).attr({ src: item.img, alt: item.judul });
imageLink.append(imgElement);
imgCell.append(imageLink);
row.append(imgCell);
row.append($('<td>').addClass("align-middle").append($('<a>').attr('href', item.link).text(item.judul)));
let actionCell = $('<td>').addClass('text-center align-middle');
let removeBtn = $('<button>').addClass("sampahFav btn btn-link border-0 py-2 putih").html('<svg class="bmkIcon-zis"><use href="#bmksampah"></use></svg>').attr('data-id', item.id);
actionCell.append(removeBtn);
row.append(actionCell);
fullFavoriteList.append(row);
});
}
updateFavoriteCountAndIcon();
}
window.loadFullFavorites = loadFullFavorites;

Fungsi ini memuat daftar favorit penuh ke dalam tabel di antarmuka pengguna.

• Data favorit diambil dari localStorage.
• Jika tidak ada data favorit, elemen tabel disembunyikan dan pesan "tidak ada favorit" ditampilkan.
• Jika ada data favorit, tabel yang berisi daftar favorit ditampilkan lengkap dengan nomor, gambar, judul, dan tombol untuk menghapus item favorit.
• Setelah data dimuat, ikon dan jumlah favorit diperbarui.

3. Fungsi broadcastStorageChange()

function broadcastStorageChange() {
localStorage.setItem("broadcast", Date.now());
}

Fungsi ini digunakan untuk menyebarkan perubahan pada localStorage ke seluruh tab atau jendela yang terbuka.

• Menyimpan timestamp saat ini ke dalam localStorage dengan kunci "broadcast".
• Fungsi ini memastikan sinkronisasi antar tab/jendela ketika ada perubahan data favorit.

4. Event Handler untuk Penghapusan Favorit

$('#full-favorite-list').on('click', '.sampahFav', function(event) {
let id = $(this).attr('data-id');
let favorites = JSON.parse(localStorage.getItem('lmydfavorites')) || [];
let updatedFavorites = favorites.filter(fav => fav.id !== id);
localStorage.setItem('lmydfavorites', JSON.stringify(updatedFavorites));

let $this = $(this);
setTimeout(function() {
$this.closest('tr').remove();
loadFullFavorites();
updateFavoriteCountAndIcon();
showZpopAlert("Removed Bookmark.");
broadcastStorageChange();
}, 200);
});

Event handler ini mengelola tindakan pengguna untuk menghapus item dari daftar favorit.

• Mengambil id item yang akan dihapus dan memfilter data favorit di localStorage untuk menghapus item tersebut.
• Baris yang berisi data favorit di tabel dihapus, kemudian tampilan diperbarui.
• Memanggil broadcastStorageChange() untuk menyebarkan perubahan ke tab/jendela lain.

5. Event Handler untuk Perubahan pada localStorage

$(window).on("storage", function(event) {
if (event.originalEvent.key === "lmydfavorites" || event.originalEvent.key === "broadcast") {
loadFullFavorites();
updateFavoriteCountAndIcon();
}
});

Event handler ini mendengarkan perubahan pada localStorage yang terjadi dari tab atau jendela lain.

• Ketika ada perubahan pada kunci "lmydfavorites" atau "broadcast", fungsi ini memuat ulang daftar favorit dan memperbarui ikon bookmark serta jumlah favorit.

6. Interval untuk Memeriksa Perubahan Data Favorit

let lastFavoriteData = localStorage.getItem('lmydfavorites');
setInterval(function() {
let currentFavoriteData = localStorage.getItem('lmydfavorites');
if (currentFavoriteData !== lastFavoriteData) {
lastFavoriteData = currentFavoriteData;
loadFullFavorites();
updateFavoriteCountAndIcon();
}
}, 1000);
});

Interval ini memastikan sinkronisasi data favorit dengan interval tertentu.

• Setiap 1 detik, kode ini memeriksa apakah ada perubahan pada data favorit di localStorage.
• Jika ada perubahan, fungsi yang memuat ulang daftar favorit dan memperbarui ikon serta jumlah favorit akan dijalankan.

7. Pemanggilan fungsi dari script diluar halamanwindow.

window.loadFullFavorites = loadFullFavorites;

Dalam case ini memanggil class Function loadFulFacorites ()

8. Inisialisasi pada $(document).ready()

Fungsi yang dijalankan ketika dokumen siap:

• Memuat daftar favorit penuh dan memperbarui ikon bookmark serta jumlah favorit ketika halaman dimuat.
• Mengatur event handler untuk menghapus favorit dan mendengarkan perubahan localStorage.
• Menjalankan interval untuk memeriksa perubahan data favorit setiap detik.

Kode di atas memberikan contoh implementasi yang baik dalam mengelola data favorit dengan localStorage, memastikan bahwa tampilan selalu sinkron dengan data yang ada, bahkan ketika ada perubahan dari tab atau jendela lain.