Κατανόηση των Βασικών

Η κατασκευή ενός διαχειριστή σελιδοδεικτών με JavaScript και το Web Storage API είναι ένα εξαιρετικό έργο για την εκμάθηση θεμελιωδών εννοιών του front-end. Στον πυρήνα της, η εφαρμογή πρέπει να χειριστεί τρεις βασικές λειτουργίες: [create[], read[]], και [delete[ — ένα κλασικό μοτίβο CRUD, μείον ενημερώσεις για τώρα. Τα δεδομένα ζουν στο πρόγραμμα περιήγησης localStorage, επιτρέποντας στους σελιδοδείκτες να επιμένουν σε όλες τις συνεδρίες χωρίς διακομιστή.

Πριν γράψετε μια ενιαία γραμμή κώδικα, στερεοποιήστε την κατανόησή σας για τους ακόλουθους πυλώνες:

  • Το DOM API: Θα ρωτήσετε στοιχεία, θα ακούσετε για γεγονότα, και θα χειραγωγήσετε το δέντρο εγγράφου για να εμφανίσετε τους σελιδοδείκτες δυναμικά.
  • localΑποθήκευση: Αυτό το κατάστημα με την τιμή-κλειδί διατηρεί δεδομένα ακόμα και μετά το κλείσιμο του browser. Υποστηρίζει μόνο συμβολοσειρές, έτσι τα αντικείμενα πρέπει να είναι σειριακά με ] και να αποσυναρμολογούνται με .
  • Προγραμματισμός με γνώμονα την εκδήλωση: Τα έντυπα εκπέμπουν γεγονότα· διαγράφουν τα κουμπιά που ρίχνουν γεγονότα. Η Mastering είναι αδιαπραγμάτευτη.
  • Μέθοδοι array: ], ], και [ θα βοηθήσουν στην απόδοση και τη χειραγώγηση του καταλόγου σελιδοδεικτών αποτελεσματικά.

Κατασκευή του κεντρικού διαχειριστή σελιδοδεικτών

Δομή HTML

Ξεκινήστε με ένα ελάχιστο, σημασιολογικό σκελετό HTML. Η φόρμα συλλέγει το όνομα και το URL του σελιδοδείκτη. Μια μη οργανωμένη λίστα αποδίδει τους αποθηκευμένους σελιδοδείκτες.

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

Προσέξτε το χαρακτηριστικό στο tag σεναρίου ⁇ αυτό εξασφαλίζει ότι το DOM έχει αναλυθεί πλήρως πριν από την εκτέλεση του σεναρίου, εξαλείφοντας την ανάγκη για ένα περιτύλιγμα σε σύγχρονες ρυθμίσεις.

Στυλ για τη χρηστικότητα (προαιρετικό αλλά συνιστώμενο)

Ενώ CSS δεν είναι η εστίαση, μια καθαρή διεπαφή βελτιώνει την εμπειρία του χρήστη. Προσθέστε ένα απλό φύλλο στυλ στο διάστημα έξω από τη φόρμα, να δώσει κουμπιά μια συνεπή εμφάνιση, και στυλ τα στοιχεία λίστα σελιδοδείκτη με hover εφέ. Minimal inline styling μπορεί επίσης να ενεθεί μέσω JavaScript, αλλά ένα ξεχωριστό [[LFT:11]] προτιμάται για τη διατηρησιμότητα.

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

Στο , χρησιμοποιήστε το flexbox για τη διάταξη της φόρμας, μέγιστο πλάτος για το δοχείο και διακριτή οπτική ανατροφοδότηση για τη διαγραφή κουμπιών για την αποτροπή τυχαίων κλικ.

JavaScript Λογική ⁇ Η καρδιά της εφαρμογής

Όλη η επιμονή και η διαδραστικότητα ζουν . Τα ακόλουθα τμήματα διασπούν κάθε λειτουργία.

Αρχικοποίηση δεδομένων

Χρειαζόμαστε μια κεντρική μεταβλητή που να κρατά την τρέχουσα λίστα των σελιδοδεικτών. Θα πρέπει να αρχικοποιηθεί από [[LFT:15]] ή να επιστρέψει σε μια άδεια συστοιχία.

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

Η συνάρτηση ονομάζεται κάθε φορά που η συστοιχία αλλάζει — μετά την προσθήκη, επεξεργασία ή διαγραφή σελιδοδείκτη. Αυτό εξασφαλίζει ότι η αποθήκευση συγχρονίζεται πάντα με τη συστοιχία μνήμης.

Εμφάνιση σελιδοδεικτών

Αποτύπωση της λίστας σελιδοδεικτών σημαίνει επανάληψη πάνω από τη σειρά και δημιουργία αντικειμένων λίστας με μια ετικέτα αγκύρωσης και ένα κουμπί διαγραφής.

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

Χρησιμοποιώντας αντί για εσωτερικήHTML αποφεύγει τα τρωτά σημεία XSS όταν τα ονόματα σελιδοδεικτών περιέχουν HTML. Το κουμπί διαγραφής χρησιμοποιεί ένα κλείσιμο για να συλλάβει το ευρετήριο του σελιδοδείκτη.

Προσθήκη σελιδοδείκτη

Ακούστε για το γεγονός της φόρμας, αποτρέπετε την προεπιλεγμένη επαναφόρτωση της σελίδας, δημιουργείτε ένα αντικείμενο σελιδοδείκτη, το σπρώχνετε στη συστοιχία, επιμένετε και επαναδιαβιβάστε.

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

Αυτή η προσέγγιση είναι απλή. Για την παραγωγή, ίσως να θέλετε να επικυρώσετε τη μορφή URL περαιτέρω χρησιμοποιώντας κατασκευαστή ή ένα regex.

Διαγραφή σελιδοδείκτη

Διαγραφή αφαιρεί το αντικείμενο στο δεδομένο ευρετήριο και ενημερώσεις αποθήκευσης και το DOM.

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

Χρησιμοποιώντας μεταλλάσσει τη διάταξη στη θέση της. Αν προτιμάτε την αμετάβλητη, θα μπορούσατε να χρησιμοποιήσετε [] και να μεταθέσετε , αλλά για ένα μικρό έργο όπως αυτό, είναι σαφές και εκτελέσιμο.

Ενίσχυση της Εφαρμογής

Μόλις το βασικό CRUD λειτουργεί, σκεφτείτε αυτές τις βελτιώσεις για να μετατρέψετε ένα πρωτότυπο σε ένα ισχυρό εργαλείο.

Επεξεργασία σελιδοδεικτών

Αντικατάσταση του στατικού ονόματος/συνδέσου με μια λειτουργία επεξεργασίας inline. Όταν ο χρήστης κάνει κλικ σε ένα κουμπί επεξεργασίας, αλλάξτε την ετικέτα της άγκυρας με πεδία εισόδου που είναι προγεμισμένα με τις τρέχουσες τιμές. Σε αποθήκευση, ενημερώστε την διάταξη και συνεχίστε.

Υποδείξεις εφαρμογής: προσθήκη μιας συνάρτησης που δημιουργεί επεξεργαστές εισόδους. Χρησιμοποιήστε ] αντιπροσωπεία γεγονότων στη λίστα για να χειριστείτε τις αποθήκες επεξεργασίας χωρίς να επισυνάψετε πολλούς ακροατές.

Κατηγοριοποίηση με ετικέτες

Προσθέστε μια προαιρετική ιδιότητα σε κάθε αντικείμενο σελιδοδείκτη (π.χ., ). Στη συνέχεια, επεκτείνετε το UI με μια είσοδο φίλτρου που κρύβει αντικείμενα λίστας των οποίων οι ετικέτες δεν ταιριάζουν. Μπορείτε να αποθηκεύσετε ετικέτες ως μια συμβολοσειρά χωρισμένη με κόμμα μέσα στη φόρμα και να τα χωρίσετε σε μια συστοιχία.

Εισαγωγή και εξαγωγή

Επιτρέπει στους χρήστες να αντιγράφουν ή να μεταφέρουν σελιδοδείκτες. Χρησιμοποιήστε ένα ή ένα αρχείο λήψης. Εξαγωγή σειριακών μεγεθών σε μια συμβολοσειρά JSON και ενεργοποιεί μια λήψη μέσω και ].

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

Αναζήτηση και Φίλτρο

Προσθέστε μια εισαγωγή πάνω από τη λίστα σελιδοδεικτών. Σε κάθε γεγονός, φιλτράρετε τη σειρά [[LFT:38]] με το όνομα (ή URL) και καλέστε μια παραλλαγή του [[LFT:39]] που εμφανίζει μόνο τα σπίρτα. Για να αποφύγετε να χάσετε την αρχική λίστα, αποθηκεύστε ένα φιλτραρισμένο αντίγραφο ή χρησιμοποιήστε μια υπολογιστική παράμετρο.

Συμβατότητα δοκιμών και περιηγητή

Το τοπικό κατάστημα υποστηρίζεται σε όλους τους σύγχρονους browsers, αλλά παλαιότερες εκδόσεις του Internet Explorer (IE 8+) είχαν ένα διαφορετικό API. Αν πρέπει να υποστηρίξει τα περιβάλλοντα κληρονομιάς, δοκιμή με πολυπληρώματα ή να πέσει πίσω στα cookies. Σήμερα Chrome, Firefox, Safari, Edge (τόσο το Chromium όσο και η κληρονομιά) λαβή και χωρίς προβλήματα.

Κατά τη δοκιμή, επαληθεύστε:

  • Τα δεδομένα επιβιώνουν ανανεώνουν τη σελίδα και ο περιηγητής επανεκκινεί.
  • Διαγραφή σελιδοδείκτη ενημερώνει τόσο το UI όσο και την αποθήκευση.
  • Ειδικοί χαρακτήρες σε ονόματα σελιδοδεικτών (quotes, ampersands) αποδίδονται σωστά.
  • Τα URL με και χωρίς ομαλοποιούνται.

Χρήση εργαλεία developer > Εφαρμογή & gt; Αποθήκευση & gt; Τοπική αποθήκευση για να επιθεωρήσετε τα αποθηκευμένα δεδομένα με το χέρι.
Για αυτοματοποιημένες δοκιμές, εξετάστε τη χρήση [Cypress] ή [Playwright για την προσομοίωση ροών εργασίας χρήστη — συμπλήρωση φόρμας, προσθήκη, διαγραφή, επαναφόρτωση — και ισχυριστείτε ότι ο κατάλογος επιμένει.

Συμπέρασμα

Αυτό το έργο δείχνει πώς μερικές δεκάδες γραμμές βανίλια JavaScript μπορούν να δημιουργήσουν μια πλήρως λειτουργική, επίμονη εφαρμογή web. Έχετε μάθει να τιθασεύετε το localStorage API για την επιμονή δεδομένων, αντιπροσωπεία εκδηλώσεων για αποτελεσματικές ενημερώσεις UI, και CRUD λειτουργίες[] χωρίς ένα σύστημα υποστήριξης. Το μοτίβο που εφαρμόσατε - αρχικοποίηση κατάστασης από την αποθήκευση, μεταλλάσσοντας κατάσταση μέσω των λειτουργιών, και επαναδιαβιβάζοντας το DOM — είναι η βάση πολλών σύγχρονων πλαισίων front-end όπως React ή Vue.

Για να εμβαθύνετε την κατανόησή σας, εξερευνήστε την τεκμηρίωση MDN σχετικά με την τοπικήΑποθήκευση[[LFT:1]] και διαβάστε για [[LFT:2]] χειρισμό γεγονότων στο DOM[[[LFT:3]]. Για πιο προηγμένη διαχείριση κατάστασης, εξετάστε [[[LFT:4]] IndexedDB[[[LFT:5]]] για μεγαλύτερα σύνολα δεδομένων ή [[LFT:6] εργαζόμενους υπηρεσιών[[[LFT:7]]] για τις εκτός σύνδεσης πρώτες εμπειρίες. Με αυτά τα δομικά στοιχεία, μπορείτε τώρα να επεκτείνετε τον διαχειριστή σελιδοδεικτών σας σε μια πλήρη βάση προσωπικών γνώσεων.