Memahami Dasar - Dasar

Mengembangkan sebuah manajer bookmark dengan JavaScript dan API Penyimpanan Web adalah proyek yang sangat baik untuk menguasai konsep front-end fundamental. Pada intinya, aplikasi harus menangani tiga operasi utama: create[, read, dan delete[ — sebuah pola CRUD klasik, minus update untuk saat ini. Data tersebut tinggal di dalam browser Storage], memungkinkan penanda buku untuk berterusan tanpa sesi server.

Sebelum menulis satu baris kode, perkokoh pemahaman Anda tentang pilar berikut:

  • [[LLAST:0]] API DOM: Anda akan menanyakan elemen, mendengarkan kejadian, dan memanipulasi tree dokumen untuk menampilkan bookmark secara dinamis.
  • Key-value store ini mempertahankan data bahkan setelah browser ditutup. Ini hanya mendukung string, sehingga objek harus diserialisasi dengan dan didesterialisasi dengan .
  • [[EfronthFLT:0]]Event-driven programming: Forms epan events; hapus buttons fire events. Mastering adalah non-negosiatif.
  • [[EfleksifLT:0]] Metode array: , , dan akan membantu merender dan memanipulasi daftar penanda buku secara efisien.

Bangunan Gedung Pengurus Penanda Buku Teras

Struktur HTML

Mulailah dengan kerangka HTML yang minimal dan semantik. Bentuk mengumpulkan nama dan URL penanda buku; sebuah daftar yang tidak diurut merender penanda buku yang disimpan.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bookmark Manager</title>
</head>
<body>
 <h1>My Bookmarks</h1>
 <form id="bookmarkForm">
 <label for="name">Name</label>
 <input type="text" id="name" required />
 <label for="url">URL</label>
 <input type="url" id="url" required />
 <button type="submit">Add Bookmark</button>
 </form>
 <ul id="bookmarkList"></ul>
 <script src="app.js" defer></script>
</body>
</html>

Notise atribut pada tag skrip ⁇ it memastikan DOM sepenuhnya diparse sebelum skrip berjalan, menghilangkan kebutuhan untuk sebuah pembungkus dalam setup modern.

Mengejar Kegunaan (Opsional tetapi Disarankan)

Sedangkan CSS bukanlah fokus, antarmuka bersih meningkatkan pengalaman pengguna. Tambahkan lembar gaya sederhana untuk mengosongkan formulir, memberi tombol tampilan yang konsisten, dan gaya item daftar bookmark dengan efek hover. Minimal inline styling juga dapat disuntikkan melalui JavaScript, tetapi terpisah lebih disukai untuk mempertahankan.

<!-- inside <head> -->
<link rel="stylesheet" href="style.css" />

¡FLLT:13]], gunakan flexbox untuk tata letak formulir, lebar maksimum untuk wadah, dan umpan balik visual yang berbeda untuk tombol hapus untuk mencegah klik tidak disengaja.

Logika JavaScript Zajarik ⁇ Hati Aplikasinya

AaII kegigihan dan interaktivitas hidup di . Bagian berikut memecah setiap fungsi.

Inisialisasi Data

Kita perlu variabel sentral yang memegang daftar penanda buku saat ini. Seharusnya ini diinisialisasi dari atau kembali ke array kosong.

let bookmarks = [];

function loadBookmarks() {
 const stored = localStorage.getItem('bookmarks');
 if (stored) {
 bookmarks = JSON.parse(stored);
 } else {
 bookmarks = [];
 }
}

function saveBookmarks() {
 localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

loadBookmarks();

Fungsi disebut setiap kali perubahan array — setelah penambahan, penyuntingan, atau penghapusan sebuah penanda buku. Ini memastikan penyimpanan selalu disinkronkan dengan susunan in-memory.

Luflosis Menampilkan Penanda Buku

THELINGING daftar penanda buku berarti mengiterasi atas Arse and forming list items with anchor tag and a steckbutton.

function renderBookmarks() {
 const list = document.getElementById('bookmarkList');
 list.innerHTML = ''; // clear existing entries

 bookmarks.forEach(function(bookmark, index) {
 const li = document.createElement('li');
 li.dataset.index = index;

 const link = document.createElement('a');
 link.href = bookmark.url;
 link.textContent = bookmark.name;
 link.target = '_blank';
 link.rel = 'noopener noreferrer';

 const deleteBtn = document.createElement('button');
 deleteBtn.textContent = 'Delete';
 deleteBtn.addEventListener('click', function() {
 deleteBookmark(index);
 });

 li.appendChild(link);
 li.appendChild(deleteBtn);
 list.appendChild(li);
 });
}

Menggunakan nama tanpa nama ] daripada dalam HTML menghindari kerentanan XSS ketika nama penanda buku mengandung HTML. Tombol hapus menggunakan penutupan untuk menangkap indeks penanda buku.

** Menambah Tanda Buku

Dengarkan formulir untuk acara , mencegah halaman baku memuat ulang, membuat sebuah objek penanda, mendorongnya ke susunan, terus, dan render.

document.getElementById('bookmarkForm').addEventListener('submit', function(e) {
 e.preventDefault();

 const nameInput = document.getElementById('name');
 const urlInput = document.getElementById('url');

 const newBookmark = {
 name: nameInput.value.trim(),
 url: urlInput.value.trim()
 };

 // Basic validation: ensure URL starts with http/https
 if (!newBookmark.url.startsWith('http://') && !newBookmark.url.startsWith('https://')) {
 newBookmark.url = 'https://' + newBookmark.url;
 }

 bookmarks.push(newBookmark);
 saveBookmarks();
 renderBookmarks();

 // Reset form
 nameInput.value = '';
 urlInput.value = '';
 nameInput.focus();
});

Pendekatan ini sederhana. Untuk produksi, anda mungkin ingin memvalidasi format URL lebih lanjut menggunakan konstruktor atau regex.

Memadam Tanda Buku

Elision olesi menghapus item pada indeks yang diberikan dan memperbarui penyimpanan dan DOM.

function deleteBookmark(index) {
 bookmarks.splice(index, 1);
 saveBookmarks();
 renderBookmarks();
}

Menggunakan mutasi array di tempat. Jika anda lebih suka ketidakstabilan, anda dapat menggunakan dan reassign , tetapi untuk proyek kecil seperti ini, adalah jelas dan pementas.

Memanenkan Aplikasinya

Setelah CRUD dasar bekerja, pertimbangkan perbaikan ini untuk mengubah prototipe menjadi alat yang kuat.

Pengubahsaizan Penanda Buku

Meganti nama/link statis dengan mode inline edit. Ketika pengguna klik tombol edit, tukar tag anchor dengan input medan pra-isi dengan nilai saat ini. Saat menyimpan, perbarui array dan terus.

Petunjuk inmplementasi olephany: tambahkan sebuah fungsi yang menciptakan masukan yang dapat disunting. Gunakan event delegasi[ pada daftar untuk menangani edit simpan tanpa melampirkan pendengar berganda.

Categorisasi dengan Tag

Tambah opsional pada setiap objek penanda buku (misalnya, ). Kemudian, perpanjang UI dengan masukan filter yang menyembunyikan daftar item yang tagnya tidak cocok. Anda dapat menyimpan tag sebagai string terpisah koma di dalam formulir dan membaginya menjadi sebuah array.

Impor dan Ekspor

Kegunaan pengguna untuk melakukan backup atau transfer bookmark. Gunakan atau file download. Ekspor serializes menjadi string JSON dan memicu download via dan . Impor baca JSON dan gabung dengan bookmark yang ada.

function exportBookmarks() {
 const data = JSON.stringify(bookmarks, null, 2);
 const blob = new Blob([data], { type: 'application/json' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'bookmarks.json';
 a.click();
 URL.revokeObjectURL(url);
}

Cari dan Tapis

Tambahkan masukan di atas daftar bookmark. Pada setiap event, saring array dengan nama (atau URL) dan sebut varian dari yang hanya menampilkan padanan. Untuk menghindari kehilangan daftar asli, simpan salinan yang disaring atau gunakan parameter yang dihitung.

Keserasian Keserasian Keserasian Kwarnas dan Perkaban Uji Kekejaman dan Peramban

Zoor localStorage didukung di semua peramban modern, tetapi versi yang lebih tua dari Internet Explorer (IE 8+) memiliki API yang berbeda. Jika Anda harus mendukung lingkungan warisan, uji dengan polyfill atau jatuh kembali ke cookie. Hari ini Chrome, Firefox, Safari, Edge (keduanya Chromium dan legacy) menangani dan tanpa masalah.

Bila pengujian, sahkan:

  • Data lendir bertahan dari penyegaran halaman dan start ulang peramban.
  • Menghapus bookmark update baik UI dan penyimpanan.
  • Aksara-aksara istimewa dalam nama tanda buku (quotes, a ''s) diberikan dengan benar.
  • URL BAHASA dengan dan tanpa dinormalkan.

Penggunaan perangkat developer Penggunaan perangkat developer; Aplikasi > Penyimpanan Lokal untuk menginspeksi data tersimpan secara manual.
Untuk pengujian otomatis, pertimbangkan menggunakan &Cypress atau Playwright untuk mensimulasikan alur kerja pengguna — isian, tambahkan, hapus, memuat ulang — dan menegaskan bahwa daftar tersebut berterusan.

Kekecualian Kesimpulan

Proyek ini menunjukkan bagaimana beberapa lusin baris vanila JavaScript dapat membuat aplikasi web yang berfungsi penuh dan gigih. Anda telah belajar untuk memanfaatkan localStorage API untuk kegigihan data, event delegasi[ untuk pembaruan UI yang efisien, dan operasi CREUD tanpa backend. Pola yang Anda terapkan — asinging keadaan dari penyimpanan, mutasi keadaan melalui fungsi, dan re-rendering DOM]] — adalah banyak yayasan modern dari kerangka kerja depan atau Vactue.

Untuk memperdalam pemahaman Anda, jelajahi dokumentasi MDN pada localStorage dan baca tentang event handling in the DOM. Untuk manajemen negara yang lebih maju, lihat ke dalam IndexedDB] untuk dataset yang lebih besar atau service pekerja untuk pengalaman offline-first. Dengan blok bangunan ini, Anda sekarang dapat memperluas bookmarker Anda ke dalam sebuah pengetahuan berbasis pribadi penuh.