मूल बातें समझना

जावास्क्रिप्ट के साथ एक बुकमार्क प्रबंधक का निर्माण और वेब स्टोरेज एपीआई मूलभूत फ्रंट-एंड अवधारणाओं को माहिर करने के लिए एक उत्कृष्ट परियोजना है। इसके मूल में, आवेदन को तीन प्राथमिक संचालनों को संभालना चाहिए: create], read, और delete] - एक क्लासिक CRUD पैटर्न, अब के लिए माइनस अपडेट। डेटा ब्राउज़र के localStorage] में रहता है, जिससे बुकमार्क्स को सर्वर के बिना सत्रों को बनाए रखने की अनुमति मिलती है।

कोड की एक लाइन लिखने से पहले, निम्नलिखित स्तंभों की अपनी समझ को ठोस बनाएं:

  • DOM API:] आप तत्वों को क्वेरी करेंगे, घटनाओं को सुनने के लिए और गतिशील रूप से बुकमार्क प्रदर्शित करने के लिए दस्तावेज़ पेड़ में हेरफेर करेंगे।
  • localStorage: यह प्रमुख मूल्य स्टोर ब्राउज़र बंद होने के बाद भी डेटा को बरकरार रखता है। यह केवल स्ट्रिंग्स का समर्थन करता है, इसलिए वस्तुओं को के साथ क्रमबद्ध किया जाना चाहिए और के साथ deserialized किया जाना चाहिए।
  • ]Event-driven प्रोग्रामिंग: फॉर्म्स का उत्सर्जन की घटनाओं; बटन को हटा दें की घटनाओं. Mastering गैर-negotiable है।
  • Arrray विधि:] , , और ]]] प्रभावी ढंग से बुकमार्क सूची को प्रस्तुत करने और हेरफेर करने में मदद करेगा।

कोर बुकमार्क प्रबंधक का निर्माण

एचटीएमएल संरचना

एक न्यूनतम, semantic 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>

स्क्रिप्ट टैग पर विशेषता - यह सुनिश्चित करता है कि DOM स्क्रिप्ट रन से पहले पूरी तरह से पार हो गया है, आधुनिक सेटअप में एक रैपर की आवश्यकता को समाप्त कर दिया गया है।

उपयोगिता के लिए स्टाइलिंग (वैकल्पिक लेकिन अनुशंसित)

जबकि सीएसएस फोकस नहीं है, एक साफ इंटरफ़ेस उपयोगकर्ता अनुभव को बेहतर बनाता है। फॉर्म को स्पेस करने के लिए एक सरल स्टाइलशीट जोड़ें, बटन को एक सुसंगत रूप दें, और बुकमार्क सूची आइटम को होवर इफेक्ट के साथ स्टाइल करें। न्यूनतम इनलाइन स्टाइलिंग को जावास्क्रिप्ट के माध्यम से भी इंजेक्ट किया जा सकता है, लेकिन एक अलग को बनाए रखने की क्षमता के लिए पसंद किया जाता है।

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

]] में, फॉर्म लेआउट के लिए फ्लेक्सबॉक्स का उपयोग करें, कंटेनर के लिए अधिकतम चौड़ाई और आकस्मिक क्लिक को रोकने के लिए बटन को हटाने के लिए अलग-अलग दृश्य प्रतिक्रियाएं।

जावास्क्रिप्ट तर्क - The Heart of the Application

सभी दृढ़ता और अन्तरक्रियाशीलता में रहते हैं ]। निम्नलिखित अनुभाग प्रत्येक कार्य को तोड़ते हैं।

डेटा आरंभीकरण

हमें बुकमार्क की वर्तमान सूची रखने वाले केंद्रीय परिवर्तनीय की आवश्यकता है। इसे से शुरू किया जाना चाहिए या एक खाली सरणी में वापस आना चाहिए।

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

] समारोह हर बार सरणी परिवर्तन कहा जाता है - जोड़ने के बाद, संपादन, या एक बुकमार्क हटाने के बाद। यह सुनिश्चित करता है कि भंडारण हमेशा इन-मेमोरी सरणी के साथ सिंक्रनाइज़ किया जाता है।

बुकमार्क प्रदर्शित करना

बुकमार्क सूची को प्रस्तुत करने का मतलब है कि ] पर iterating और एक एंकर टैग और एक हटाए गए बटन के साथ सूची आइटम बनाने के लिए।

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

]] का उपयोग करके, अंदरूनी एचटीएमएल के बजाय XSS vulnerability से बचाता है जब बुकमार्क नामों में 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();
});

यह दृष्टिकोण सीधा है। उत्पादन के लिए, आप यूआरएल प्रारूप को आगे निर्माता या रेगेक्स का उपयोग करके मान्य करना चाहते हैं।

एक बुकमार्क हटाने

डिलेशन दिए गए इंडेक्स और अपडेट स्टोरेज और DOM पर आइटम को हटा देता है।

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

] का उपयोग करके, सरणी को जगह में बदल देता है। यदि आप अस्वस्थता पसंद करते हैं, तो आप का उपयोग कर सकते हैं और ]] को फिर से सौंप सकते हैं, लेकिन इस तरह की एक छोटी परियोजना के लिए, स्पष्ट और प्रदर्शनकारी है।

आवेदन को बढ़ाना

एक बार जब मूल CRUD काम करता है, तो इन सुधारों को एक प्रोटोटाइप को एक मजबूत टूल में बदलने के लिए विचार करें।

संपादन बुकमार्क

एक इनलाइन संपादित मोड के साथ स्थिर नाम / लिंक को बदलें। जब उपयोगकर्ता एक संपादन बटन पर क्लिक करता है, तो वर्तमान मूल्यों से पहले से भरे इनपुट फ़ील्ड के साथ एंकर टैग को स्वैप करें। बचत पर, सरणी को अद्यतन करें और जारी रखें।

कार्यान्वयन संकेत: एकाधिक श्रोताओं को संलग्न किए बिना संपादन को बचाने के लिए सूची में का उपयोग करें।

टैग के साथ Categorization

प्रत्येक बुकमार्क ऑब्जेक्ट (जैसे, ) में एक वैकल्पिक ] जोड़ें। फिर, एक फिल्टर इनपुट के साथ यूआई का विस्तार करें जो सूची आइटम को छिपाता है जिसका टैग मैच नहीं करते हैं। आप टैग को फॉर्म के अंदर एक अल्पायोजित स्ट्रिंग के रूप में स्टोर कर सकते हैं और उन्हें एक सारणी में विभाजित कर सकते हैं।

आयात और निर्यात

उपयोगकर्ताओं को बैकअप या ट्रांसफर करने की अनुमति दें। एक का उपयोग करें या फ़ाइल डाउनलोड करें। निर्यात को एक JSON स्ट्रिंग में ] को क्रमबद्ध करता है और ]] के माध्यम से एक डाउनलोड को ट्रिगर करता है। आयात 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);
}

खोज और फ़िल्टर

प्रत्येक ] घटना पर, ] सरणी को नाम (या URL) द्वारा फ़िल्टर करें और का एक संस्करण बुलाएं, जो केवल मैचों को प्रदर्शित करता है। मूल सूची खोने से बचने के लिए, एक फ़िल्टर्ड कॉपी को स्टोर करें या एक कम्प्यूटेड पैरामीटर का उपयोग करें।

परीक्षण और ब्राउज़र संगतता

स्थानीय भंडारण सभी आधुनिक ब्राउज़रों में समर्थित है, लेकिन इंटरनेट एक्सप्लोरर (IE 8+) के पुराने संस्करणों में एक अलग एपीआई था। यदि आपको विरासत के वातावरण का समर्थन करना होगा, तो पॉलीफिल के साथ परीक्षण करें या कुकीज़ पर वापस जाएं। आज का क्रोम, फ़ायरफ़ॉक्स, सफारी, एज (दोनों क्रोमियम और विरासत) हैंडल ] और ]] बिना मुद्दों के।

जब परीक्षण, सत्यापित करें:

  • डेटा पेज रिफ्रेश और ब्राउज़र रिबूट से बच जाता है।
  • एक बुकमार्क अद्यतन को यूआई और स्टोरेज दोनों को हटा रहा है।
  • बुकमार्क नामों (कोट्स, एम्परेंड) में विशेष वर्ण सही ढंग से प्रस्तुत किए जाते हैं।
  • यूआरएल के साथ और बिना सामान्यीकृत हैं।

] का प्रयोग करें > Application > Storage > Local Storage to use बचाया data मैन्युअल रूप से.
स्वचालित परीक्षण के लिए, Cypress या Playwright]]]] का उपयोग करके उपयोगकर्ता वर्कफ़्लोज़ को अनुकरण करने के लिए - फॉर्म भरें, जोड़ें, हटाएं, पुनः लोड करें - और यह दावा करें कि सूची जारी रहती है।

निष्कर्ष

यह परियोजना दर्शाता है कि वेनिला जावास्क्रिप्ट की कुछ दर्जन लाइनें पूरी तरह कार्यात्मक, लगातार वेब अनुप्रयोग बना सकती हैं। आपने डेटा दृढ़ता के लिए localStorage API] का उपयोग करना सीखा है, Event delegation]]] कुशल यूआई अद्यतन के लिए, और CRUD परिचालन ]]] बिना किसी बैकएंड के। आपके द्वारा लागू पैटर्न - भंडारण से शुरू करने वाला राज्य, कार्यों के माध्यम से राज्य को उत्परिवर्तन करना, और डीओएम को फिर से प्रस्तुत करना - रिएक्ट या Vue जैसे कई आधुनिक फ्रंट-एंड फ्रेमवर्क का आधार है।

अपनी समझ को गहरा करने के लिए, स्थानीय स्टोरेज पर MDN प्रलेखन का पता लगाएं और इसके बारे में DOM]] में हैंडलिंग को रोकने के लिए। अधिक उन्नत राज्य प्रबंधन के लिए, IndexedDB]]]]] में बड़े डेटा सेट के लिए या सेवा कार्यकर्ताओं ]] ऑफ़लाइन-पहले अनुभवों के लिए। इन बिल्डिंग ब्लॉकों के साथ, आप अब अपने बुकमार्क प्रबंधक को एक पूर्ण व्यक्तिगत ज्ञान आधार में विस्तारित कर सकते हैं।