Perusteiden ymmärtäminen

Kirjanmerkkien hallinta JavaScript-sovelluksella ja Web Storage API -sovelluksella on erinomainen projekti peruslähtökohtien hallintaan. Sovelluksen ytimessä on käsiteltävä kolmea ensisijaista toimintoa: [luo[[], [read[]] ja [[]]delete[]] . Klassinen CRUD-malli miinus päivitykset toistaiseksi. Tieto elää selaimessa localStorage[[], jolloin kirjanmerkit pysyvät istuntojen välillä ilman palvelimea.

Ennen kuin kirjoitat yhden rivin koodia, kiinteyttää ymmärrystäsi seuraavista pilareista:

  • DOM API:[ Sinun kyselyt elementtejä, kuunnella tapahtumia, ja manipuloida asiakirjapuun näyttää kirjanmerkkejä dynaamisesti.
  • LocalStorage:[] Tämä avainarvovarasto säilyttää tiedot myös selaimen sulkemisen jälkeen. Se vain tukee merkkijonoja, joten objektit on serialisoitava :lla ja deerialisoitava :lla.
  • Tapahtumalähtöinen ohjelmointi:[ Lomakkeet säteilevät tapahtumia; poista painikkeet tulipalo tapahtumia. Mastering ei ole neuvoteltavissa.
  • Kaavamenetelmät: [ ], ja auttavat tekemään ja manipuloimaan kirjanmerkkiluetteloa tehokkaasti.

Ydinkirjanmerkkien hallinta

HTML- rakenne

Aloita pienellä, semanttisella HTML-luurangolla. Lomakkeessa kerätään kirjanmerkkiä ja URL-osoitetta; tilaamaton lista tekee tallennetut kirjanmerkit.

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

Huomaa -attribuutti komentojonotunnisteessa . Se varmistaa, että DOM on täysin jäsennelty ennen komentosarjan käyntiä, jolloin -kääreen tarve poistetaan nykyaikaisissa setupeissa.

Styling for Userability (valinnainen mutta suositeltava)

Vaikka CSS ei ole painopiste, puhdas käyttöliittymä parantaa käyttäjäkokemusta. Lisää yksinkertainen tyylisivu tilaan lomakkeen, anna painikkeet johdonmukainen ilme, ja tyyli kirjanmerkki listan kohteita leijumisefekteillä. Minimal inline muotoilu voidaan myös ruiskuttaa JavaScript, mutta erillinen on suositeltava ylläpitoon.

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

kohdassa käytetään kaavakkeen ulkoasua varten Flexboxia, säiliön enimmäisleveys ja erillinen visuaalinen palaute painikkeiden poistamisesta, jotta vältytään vahingossa napsautuksilta.

JavaScript Logic ... Sovelluksen sydän

Kaikki pysyvyys ja interaktiivisuus elävät . Seuraavat osat jaottelevat kukin toiminto.

Tietojen alustus

Tarvitsemme keskeisen muuttujan, joka pitää nykyisen kirjanmerkkiluettelon. Se tulisi alustaa tai palata tyhjään matriisiin.

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

-toimintoa kutsutaan aina kun matriisi muuttuu ... kirjanmerkin lisäämisen, editointien tai poistamisen jälkeen. Tämä varmistaa, että tallennus on aina synkronoitu muistinsisäisten matriisien kanssa.

Näytetään kirjanmerkit

Kirjanmerkkilistan reenderöinti tarkoittaa -rivistön yli iteratointia ja listan luontia ankkuritunnisteella ja poistopainikkeella.

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

Käyttämällä sisäisen HTML:n sijaan välttää XSS-alttiutta, kun kirjanmerkkien nimet sisältävät HTML:ää. Poista-painikkeella voit kaapata kirjanmerkkien indeksin.

Lisään kirjanmerkin

Kuuntele lomake tapahtuma, estää oletussivun ladata uudelleen, luoda kirjanmerkki objekti, työntää se array, jatkaa ja uudelleen uudelleen kopioi.

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

Tämä lähestymistapa on yksinkertainen. Tuotannossa kannattaa ehkä vahvistaa URL-muoto edelleen käyttäen konstruktoria tai regexiä.

Kirjanmerkin poistaminen

Poistamalla kohteen tietystä indeksistä ja päivittämällä tallennustilaa ja DOM-muistia.

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

muuttaa matriisin. Jos haluat muuntamattomuutta, voit käyttää ja siirtää , mutta pienessä projektissa tämä on selkeä ja performanssi.

Hakemuksen parantaminen

Kun perus CRUD toimii, harkitse näitä parannuksia tehdä prototyyppi vankka työkalu.

Muokkataan kirjanmerkkejä

Korvaa staattinen nimi/linkki inline-muokkaustilalla. Kun käyttäjä napsauttaa muokkauspainiketta, vaihda ankkuritunniste nykyisillä arvoilla esitäytetyillä tulokentillä. Tallenna, päivitä matriisi ja jatka.

Toteutusvihje: lisää -toiminto, joka luo muokattavissa olevia syötteitä. Käytä -tapahtuman delegaatiota[] luettelossa muokataksesi tallennuksia ilman, että siihen liitetään useita kuuntelijoita.

Luokitus tunnisteilla

Lisää valinnainen ominaisuus jokaiseen kirjanmerkkiesineeseen (esim. ). Laajenna sitten käyttöliittymää suodatinsyöttimellä, joka piilottaa luettelokohteet, joiden tunnisteet eivät täsmää. Voit tallentaa tunnisteet pilkkujen erotetuksi jonoksi lomakkeen sisällä ja jakaa ne array-muotoon.

Tuonti ja vienti

Salli käyttäjien varmuuskopioida tai siirtää kirjanmerkkejä. Käytä tai tiedoston latausta. Vie sarjaversiot JSON- merkkijonoon ja käynnistä lataus ja . Tuonti lukee JSONin ja sulautuu olemassa oleviin kirjanmerkkeihin.

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

Etsi ja suodata

Lisää kirjainmerkkiluettelon yläpuolelle syöte. Jokaisessa -tapahtumassa suodata -matriisi nimen (tai URL:n) mukaan ja soita -versioon, joka näyttää vain ottelut. Jotta et menettäisi alkuperäistä luetteloa, säilytä suodatettu kopio tai käytä tietokonetta.

Testaus ja selainyhteensopivuus

PaikallistaStoragea tuetaan kaikissa nykyaikaisissa selaimissa, mutta vanhoilla Internet Explorer (IE 8+) -versioilla oli erilainen API. Jos sinun täytyy tukea perinteisiä ympäristöjä, testata monitäyttöisiä tai palata evästeisiin. Tänään Crome, Firefox, Safari, Edge[] (sekä Kromi että perintö) käsittelevät ja ilman ongelmia.

Testauksessa on tarkistettava:

  • Data selviää sivun virkistyksistä ja selain käynnistyy uudelleen.
  • Kirjanmerkin poistaminen päivittää sekä käyttöliittymää että tallennustilaa.
  • Kirjanmerkkien erikoismerkit (quotes, ampersands) on tehty oikein.
  • URL-osoitteet normalisoidaan.

Käytä kehittäjätyökaluja[ > Sovellus > Tallennus > Paikallinen tallennus tarkastaa tallennetut tiedot manuaalisesti.[
] Automatisoitua testausta varten harkitse Cypress[] tai []Playwright simuloi käyttäjän työnkulkua . Täytä lomake, lisää, poista, lataa uudelleen .

Päätelmät

Tämä projekti osoittaa, kuinka muutama tusina riviä vanilla JavaScript voi luoda täysin toimiva, jatkuva web-sovellus. Olet oppinut valjastamaan [[]paikallisen Storage API[] tietojen pysyvyyden, []tapahtuma delegointi[[]] tehokkaan käyttöliittymän päivitykset, ja [[]CRUD toiminnot[] ilman taustaosa. Kuvio, jota sovelsit . Alustaa tila tallennus, mutatoiminen tilassa toimintojen kautta, ja uudelleen uudelleen uustaminen DOM .

Syventääksesi ymmärrystäsi, tutki []MDN:n paikallisesta aineistosta[] ja lue [:n tapahtumakäsittelystä DOM[]. Jotta valtiojohto olisi edistynyt, tutki []:aIndeksoitua DB[]:a suurempia tietokokonaisuuksia varten tai [ palvelutyöntekijöille[ offline-kokemuksille. Näiden rakennuspalkkien avulla voit nyt laajentaa kirjanmerkkiesi manageria täysimittaiseksi henkilökohtaiseksi tietopohjaksi.