حفظ بيانات المستخدم بعد تحديث الصفحة

تخيل أنك تكتب مدير مهمة. يجب أن يعمل التطبيق على أنه أصلي: العمل دون اتصال بالإنترنت وكذلك عبر الإنترنت.

المفهوم الأساسي

الأداة الرئيسية لدينا في بناء مثل هذا التطبيق هي localstorage.

لست على دراية بطرق أخرى لتنفيذ ذلك. الطريقة التي أخبرك بها اخترعت بنفسي وبدا لي ناجحًا.

كيف ستعمل؟

لذلك ، لدينا قائمة المهام:

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

نحتاج إلى تخزين وتحديث نص المهمة وإكمال / عدم تنفيذ الحالة ، وكذلك تنفيذ إضافة مهمة جديدة.

سنقوم بإنشاء مفتاح عشوائي لكل مهمة واستخدامه كمعرف لكل المعلومات المخزنة ذات الصلة في localstorage. عن طريق القياس ، يبدو وكأنه قاعدة بيانات.

من أين تبدأ؟

بادئ ذي بدء ، سوف نرى ما إذا كانت هناك بالفعل أي مهام في الذاكرة. سيتم تخزين جميع المفاتيح في سطر واحد

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

نحن ننفذ الوظائف المفقودة updateEvent و 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); } 

عظيم! قمنا بتنفيذ إضافة المهام وحفظها في localStorage. يبقى لاستكمال المهمة التي تم حفظها بالفعل.

الإخراج حفظ المهمة

لعرض المهمة ، يكفي الحصول على جميع المفاتيح ، وتحليلها ، وسحب نص المهمة وحالتها لكل مفتاح. بعد ذلك ، نقوم ببساطة بإنشاء كل مهمة في الجذر: نحصل على المهمة باستخدام 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); }); 

بشكل عام ، أبسط مدير المهام لدينا جاهز. يبقى لجمع كل شيء في كومة.

مدير مهام العمل متاح هنا .