Comprendere i principi fondamentali

Costruire un bookmark manager con JavaScript e l’API di storage Web è un ottimo progetto per padroneggiare i concetti di front-end fondamentali. Al suo nucleo, l’applicazione deve gestire tre operazioni primarie: create[]], ]]read, e ]]]]

Prima di scrivere una singola riga di codice, solidifica la tua comprensione dei seguenti pilastri:

  • L'API DOM:[] E' possibile eseguire query, ascoltare eventi e manipolare l'albero dei documenti per visualizzare i segnalibri dinamicamente.
  • localStorage:[[] Questo negozio di valori chiave conserva i dati anche dopo la chiusura del browser. Supporta solo le stringhe, quindi gli oggetti devono essere serializzati con e deserializzati con .
  • Programmazione guidata dall'evento:[[] I moduli emettono [] eventi; eliminare i pulsanti fuoco [] eventi.
  • Metodi di scrittura:[] , [], e [] aiuterà a rendere e manipolare l'elenco dei segnalibri in modo efficiente.

Costruire il core Bookmark Manager

Struttura HTML

Inizia con uno scheletro HTML minimale e semantico. Il modulo raccoglie il nome e l'URL del segnalibro; un elenco non ordinato rende i segnalibri memorizzati.

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

Notare l'attributo sul tag script, assicura che il DOM sia completamente parso prima che lo script funzioni, eliminando la necessità di un wrapper nelle impostazioni moderne.

Styling per l'utilizzo (opzionale ma consigliato)

Se CSS non è il focus, un'interfaccia pulita migliora l'esperienza dell'utente. Aggiungete un semplice foglio di stile per spaziare il modulo, date un look coerente e disegnate gli elementi della lista dei segnalibri con effetti hover. Lo styling in linea minimal può anche essere iniettato tramite JavaScript, ma un separato è preferito per la manutenbilità.

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

In , utilizzare flexbox per il layout del modulo, una larghezza massima per il contenitore, e feedback visivo distinto per cancellare i pulsanti per evitare clic accidentali.

JavaScript Logic – Il cuore dell'applicazione

Tutte le persistenza e l'interattività vivono in [. Le sezioni seguenti si distinguono per ogni funzione.

Inizializzazione dei dati

Abbiamo bisogno di una variabile centrale che tenga l'elenco corrente dei segnalibri, che dovrebbe essere inizializzata da o rientrare in un array vuoto.

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

La funzione viene chiamata ogni volta che l'array cambia, dopo aver aggiunto, modificato o eliminato un segnalibro, assicurando che lo storage sia sempre sincronizzato con l'array in-memory.

Visualizzazione di segnalibri

Rendere l'elenco dei segnalibri significa iterating sopra l'array e creare elementi di lista con un tag di ancoraggio e un pulsante di cancellazione.

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

Utilizzando invece di interiorHTML evita le vulnerabilità XSS quando i nomi dei segnalibri contengono HTML. Il pulsante elimina utilizza una chiusura per catturare l'indice del segnalibro.

Aggiungere un Segnalibro

Ascoltare l'evento del modulo, impedire il caricamento della pagina predefinita, creare un oggetto di segnalibro, spingerlo all'array, persistere e ri-ri-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();
});

Questo approccio è semplice. Per la produzione, si potrebbe desiderare di convalidare il formato URL ulteriormente utilizzando costruttore o un regex.

Cancellare un segnalibro

La cancellazione rimuove l'elemento all'indice indicato e aggiorna lo storage e il DOM.

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

Se preferite l'immutabilità, potreste usare e riassegnare , ma per un piccolo progetto come questo, è chiaro e performante.

Migliorare l'applicazione

Una volta che il CRUD di base funziona, consideri questi miglioramenti per trasformare un prototipo in uno strumento robusto.

Modifica dei segnalibri

Sostituisci il nome statico/link con una modalità di modifica in linea. Quando l'utente fa clic su un pulsante di modifica, scambia il tag di ancoraggio con i campi di input pre-riempiti con i valori correnti.

Suggerimento di implementazione: aggiungere una funzione che crea ingressi modificabili. Utilizzare event delegazione[[]] nella lista per gestire i salva modifiche senza attaccare più ascoltatori.

Categorizzazione con tag

Aggiungi una proprietà opzionale a ogni oggetto di bookmark (ad esempio ]). Quindi, estendere l'interfaccia utente con un ingresso di filtro che nasconde gli elementi di lista i cui tag non corrispondono.

Importazione ed esportazione

Permette agli utenti di eseguire il backup o trasferire i segnalibri. Utilizzare un o un download di file. Esporta serializza [] in una stringa JSON e attiva un download tramite e . Importa legge il JSON e si fonde con i segnalibri esistenti.

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

Ricerca e Filtro

Aggiungi un input sopra l'elenco dei segnalibri. Su ogni evento, filtrare l'array per nome (o URL) e chiamare una variante di che visualizza solo le partite. Per evitare di perdere l'elenco originale, memorizzare una copia filtrata o utilizzare un parametro calcolato.

Test e compatibilità del browser

localStorage è supportato in tutti i browser moderni, ma le versioni più vecchie di Internet Explorer (IE 8+) hanno avuto una API diversa. Se è necessario supportare ambienti legacy, testare con polifill o cadere di nuovo ai cookie.

Quando si verifica, verificare:

  • I dati sopravvivono alla pagina rinfresca e riavvia il browser.
  • Cancellare un segnalibro aggiorna sia l'interfaccia utente che lo storage.
  • I caratteri speciali nei nomi dei segnalibri (quote, ampersands) vengono resi correttamente.
  • Gli URL con e senza sono normalizzati.

Utilizzare strumenti di sviluppo[[]] > Applicazione > Storage > Local Storage per ispezionare manualmente i dati salvati.
Per i test automatizzati, considerare l'utilizzo Cypress o ] Playwright per simulare flussi di lavoro degli utenti

Conclusioni

Questo progetto dimostra come poche decine di linee di JavaScript vaniglia possono creare un'applicazione web completamente funzionale e persistente. Avete imparato a sfruttare l'API localStorage[[ DO]] per la persistenza dei dati, ]event delegazioni per aggiornamenti UI efficienti, e operazioni di CRUD

Per approfondire la vostra comprensione, esplorare la documentazione MDN su localStorage e leggere event handling in DOM. Per una gestione più avanzata dello stato, cercare IndexedDB per i più grandi datasets blocchi]