पृष्ठ पुनः लोड के बाद उपयोगकर्ता डेटा की बचत

कल्पना कीजिए कि आप एक कार्य प्रबंधक लिख रहे हैं। एप्लिकेशन को मूल के रूप में काम करना चाहिए: ऑफ़लाइन और साथ ही ऑनलाइन काम करें।

मूल अवधारणा

इस तरह के एक अनुप्रयोग के निर्माण में हमारा मुख्य उपकरण लोकलस्टोरेज है।

मैं इसे लागू करने के अन्य तरीकों से परिचित नहीं हूं। जिस विधि के बारे में मैं आपको बताऊंगा उसका आविष्कार मैंने खुद किया था और यह मुझे सफल लगा।

कैसे चलेगा?

इसलिए, हमारे पास कार्यों की एक सूची है:

<ul class="tasks"> <li class="task"> <p class="task__text" contenteditable="true">Eggs</p> <input type="checkbox"> </li> <li class="task"> <p class="task__text" contenteditable="true">Breads</p> <input type="checkbox"> </li> </ul> <button class="task__add-btn" type="button">New task</button> 

हमें कार्य के पाठ को संग्रहीत करने और अद्यतन करने की आवश्यकता है और स्थिति पूरी हो गई है / नहीं है, और एक नए कार्य के अतिरिक्त को लागू भी करता है।

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

कहाँ से शुरू करें?

सबसे पहले, हम देखेंगे कि स्मृति में पहले से ही कोई कार्य हैं या नहीं। सभी कुंजियों को एक पंक्ति में संग्रहीत किया जाएगा

 const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', '); // ... } 

हम स्टोर किए गए डेटा के भंडारण और उपयोग की अवधारणा को समझने के लिए अब तक एक नए कार्य के साथ सौदा करेंगे।

जब आप एक कार्य जोड़ें पर क्लिक करते हैं, तो एक कार्य टेम्पलेट सूची में दिखाई देगा, कार्य पाठ संपादित किया जा सकता है। अब आपको यह सब वर्णन करने की आवश्यकता है।

आइए एक फ़ंक्शन बनाएं जो इसके ट्रांसफर किए गए डेटा का उपयोग करके अपनी सामग्री के साथ एक तत्व बनाता है।

 function getTemplate(token, data) { const task = document.createElement('li'); task.classList.add('task'); task.setAttribute('data-token', token); task.innerHTML = ` <p class="task__text" contenteditable="true">${data.text}</p> <input type="checkbox" ${data.input == 'true' ? 'checked' : ''}> `; return task; } 

हम बटन के लिए और कार्य को संपादित करने के लिए घटनाओं का वर्णन करते हैं:

 const btnAddTask = document.querySelector('.task__add-btn'); btnAddTask.addEventListener('click', function(e) { e.preventDefault(); const newToken = randomToken(); tokens.push(newToken); const taskData = { text: 'Task`s title', input: false }; root.appendChild(getTemplate(newToken, taskData)); updateTokens(); updateEvent(newToken); }); 

हम लापता कार्यों को लागू करते हैं अद्यतन और randomToken।

 function updateEvent(token) { const task = root.querySelector(`[data-token="${token}"]`); const text = task.querySelector(`.task__text`); const input = task.querySelector(`input`); localStorage.setItem(`text-${token}`, text.innerHTML); localStorage.setItem(`input-${token}`, input.checked); text.addEventListener('input', function() { localStorage.setItem(`text-${token}`, text.innerHTML); }); input.addEventListener('click', function() { localStorage.setItem(`input-${token}`, input.checked); }); } function updateTokens() { localStorage.setItem('tokens', tokens.join(', ')); } function randomToken() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); } 

बहुत बढ़िया! हमने कार्य जोड़ने और उन्हें स्थानीयस्टोरेज में सहेजने का काम किया। यह उस कार्य को समाप्त करने के लिए बना हुआ है जो पहले से ही बचा हुआ है।

आउटपुट सहेजे गए कार्य

कार्यों को प्रदर्शित करने के लिए यह सभी कुंजी प्राप्त करने के लिए पर्याप्त है, उन्हें पार्स करें, प्रत्येक कुंजी के लिए कार्य पाठ और इसकी स्थिति को बाहर निकालें। अगला, हम बस प्रत्येक कार्य को रूट में बनाते हैं: हम getTemplate का उपयोग करके कार्य प्राप्त करते हैं और इसे रूट में पेस्ट करते हैं।

  tokens.forEach(function(token) { const text = localStorage.getItem(`text-${token}`); const input = localStorage.getItem(`input-${token}`); root.appendChild(getTemplate(token, { text: text, input: input })); updateEvent(token); }); 

सामान्य तौर पर, हमारा सबसे सरल कार्य प्रबंधक तैयार है। यह ढेर में सब कुछ इकट्ठा करने के लिए बनी हुई है।

यहां कार्य कार्य प्रबंधक उपलब्ध है ।