Înţelegerea elementelor de bază

Construirea unui manager de semne de carte cu JavaScript și API Web Storage este un proiect excelent pentru masterarea conceptelor de bază ale front-end. În nucleul său, aplicația trebuie să se ocupe de trei operațiuni primare: ] Crea , read și delete]

Înainte de a scrie o singură linie de cod, solidificați înțelegerea dumneavoastră a următorilor piloni:

  • Dom API: Veți interoga elemente, asculta evenimente și manipula arborele de documente pentru a afișa semne de carte dinamic.
  • Storage local:[ Acest magazin cu valoare cheie păstrează date chiar și după ce browserul este închis. Sprijină doar sfori, astfel încât obiectele trebuie să fie serializate cu și dezarializate cu .
  • Programare bazată pe evenimente: Formele emit evenimente; ștergeți butoanele de foc evenimente. Maestrul este nenegociabil.
  • Metode de tragere: , și vor ajuta la redarea și manipularea eficientă a listei de semne de carte.

Construirea managerului de semne de carte de bază

Structură HTML

Începe cu un schelet minim, semantic HTML. Formularul colectează numele semnului de carte și URL-ul; o listă neordonată redă semnele de carte stocate.

<!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>

Observați atributul de pe tag-ul script-ului asigură că DOM este complet parsed înainte de rularea script-ului, eliminând necesitatea unui ambalaj în setup-uri moderne.

Stil pentru utilizare (Opțional, dar recomandat)

În timp ce CSS nu este focusul, o interfață curată îmbunătățește experiența utilizatorului. Adăugați o foaie de stil simplă pentru a spațiu forma, da butoanelor un aspect consistent, și stil elementele lista semn de carte cu efecte hover. Styling linie minim poate fi injectat, de asemenea, prin JavaScript, dar un separat este preferat pentru întreținere.

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

În , utilizați flexbox pentru aspectul formularului, o lățime maximă pentru recipient și feedback vizual distinct pentru ștergerea butoanelor pentru a preveni clicurile accidentale.

Logica JavaScript

Toate persistența și interactivitatea trăiesc în . Următoarele secțiuni descompune fiecare funcție.

Inițializarea datelor

Avem nevoie de o variabilă centrală care să dețină lista curentă de semne de carte. Ar trebui inițializată de la sau să cadă înapoi la un array gol.

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();

Funcția este numită de fiecare dată când matricea se schimbă

Afişează semne de carte

Retrimiterea listei de semne de carte înseamnă iterarea peste matricea și crearea de elemente de listă cu o etichetă ancoră și un buton de ștergere.

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);
 });
}

Folosind în loc de HTML interior evită vulnerabilitățile XSS atunci când numele marcajelor conțin HTML. Butonul șterge folosește o închidere pentru a captura indexul semnului de carte.

Adăugare semn de carte

Ascultați pentru forma ] eveniment, preveniți reîncărcarea paginii implicite, creați un obiect semn de carte, împingeți-l la matrice, persistați și re-retrimiteți.

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();
});

Această abordare este simplă. Pentru producție, ați putea dori să validați formatul URL folosind în continuare constructor sau regex.

Ștergerea unui semn de carte

Deleția elimină elementul de la indicele dat și actualizările de stocare și DOM.

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

Folosind ] muta array-ul în loc. Dacă preferați imuabilitate, ați putea folosi și reatribuirea , dar pentru un proiect mic ca acesta, este clară și performantă.

Îmbunătăţirea aplicaţiei

Odată ce CRUD de bază funcționează, ia în considerare aceste îmbunătățiri pentru a transforma un prototip într-un instrument robust.

Editare semne de carte

Înlocuiți numele/linkul static cu un mod de editare inline. Când utilizatorul face clic pe un buton de editare, schimba eticheta ancorei cu câmpurile de intrare pre-umplete cu valorile curente. La salvare, actualizați array-ul și persistați.

Indiciu de implementare: adăugați o funcție care creează intrări editabile. Utilizați delegație de evenimente] pe listă pentru a gestiona editarea salvează fără a atașa ascultători multipli.

Categorizare cu etichete

Adăugați o proprietate opțională la fiecare obiect semn de carte (de exemplu, []. Apoi, extindeți UI cu o intrare filtru care ascunde elementele de listă ale căror etichete nu se potrivesc. Puteți stoca etichete ca un șir separat de virgulă în interiorul formei și le împărțiți într-un array.

Import și export

Permite utilizatorilor să backup sau să transfere semne de carte. Utilizați un sau o descărcare de fișiere. Exportul serializates într-un șir JSON și declanșează o descărcare prin și . Importul citește JSON și fuzionează cu semne de carte existente.

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);
}

Căutare și filtrare

Adăugați o intrare deasupra listei de semne de carte. La fiecare eveniment, filtrați matricea [ după nume (sau URL) și sunați la o variantă a care afișează doar meciurile. Pentru a evita pierderea listei originale, depozitați o copie filtrată sau folosiți un parametru calculat.

Compatibilitatea testelor și a browser-ului

Storage local este sprijinit în toate browserele moderne, dar versiunile mai vechi ale Internet Explorer (IE 8+) au avut un API diferit. Dacă trebuie să sprijiniţi mediile moștenite, să testaţi cu polifilluri sau să vă retrageţi la cookie-uri. Astăzi ]Chrome, Firefox, Safari, Edge (atât crom cât şi moştenire) mâner şi fără probleme.

La încercare, verificați:

  • Datele supravieţuiesc reîmprospătării paginii şi reporneşte browser-ul.
  • Ștergerea unui semn de carte actualizează atât UI cât și stocarea.
  • Personajele speciale din numele marcajelor (citări, ampersand-uri) sunt redate corect.
  • URL-urile cu și fără sunt normalizate.

Utilizați Instrumente developer[ > Aplicație > Stocare > Stocare locală pentru a inspecta manual datele salvate.[
Pentru testare automată, luați în considerare utilizarea Cypress sau Drept de zbor] pentru a simula activitatea utilizatorului umpleți formularul, adăugați, ștergeți, reîncărcați

Concluzie

Acest proiect demonstrează modul în care câteva zeci de linii de vanilie JavaScript poate crea o aplicație web complet funcțională, persistentă. Ați învățat să valorificați API localăStorage[] pentru persistența datelor, delegarea evenimentului pentru actualizări eficiente ale UI, și operațiuni ale CRUD fără un suport. Modelul pe care l-ați aplicat

Pentru a vă aprofunda înțelegerea, explorați documentația MDN privind Storage-ul local[ și citiți despre managementul evenimentului în DOM[.Pentru o gestionare mai avansată a statului, priviți indexedDB] pentru seturile de date mai mari sau serviciile de personal pentru experiențele offline. Cu aceste blocuri de construcții, puteți extinde acum managerul de semne de carte într-o bază de cunoștințe personale cu drepturi depline.