مشكلة في عدم تحميل المعلومات المخزنة في localStorage في جافاسكريبت

Mohamed Lotfi · 16 مارس 2022

انا خزنت القيمه بلlocalstorage بس لما اعمل reload بختفا المحتوا ال موجود بل صفحه ممكن حدا يشوف الكود و يظبطو و يقلي وين الغلط بل كود مشان اتعلم

ملف HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="To do list.css">
    <script src="To do list.js" defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div>
            <h1 class="h11">Task List</h1>
            <p class="p1">New task</p>
            <input type="text" class="input1">
            <button class="btn1 btn">ADD TASK</button>


        </div>
        <hr>
        <div>
            <h1 class="h12">Tasks</h1>
            <input type="text" class="input2" placeholder="Filter tasks">
            <p class="p1">Click on this button and then on specific task to strike/unstrike it</p>
            <button class="btn1 btn4">Strike/Unstrike</button>

            <div class="container1" id="container1">

            </div>
            <button class="btn2">CLEAR TASKS</button> <button class="btn1 strikeall">Strike all tasks</button>
        </div>

    </div>
    <script>
    </script>
</body>

</html>

ملف جافاسكريبت

var input1 = document.querySelector(".input1"),
  text1 = document.querySelector(".p1"),
  btn = document.querySelector(".btn1"),
  input2 = document.querySelectorAll(".input2"),
  container = document.getElementById("container1"),
  content = document.querySelector(".content"),
  A = 1;

function tasks(value) {
  if (value.trim() < 1) {
    alert("Please enter a valid task");
  } else {
    var div = document.createElement("div"),
      div2 = document.createElement("div"),
      div1 = document.createElement("div"),
      p = document.createElement("span"),
      x2 = document.createElement("span");
    localStorage.setItem("task" + A, value);
    console.log(value);
    container.appendChild(div).appendChild(div1);
    div.classList.add("content");
    div.appendChild(div2);
    p.innerText = localStorage.getItem("task" + A);
    p.classList.add("task");
    div1.appendChild(p);
    x2.innerText = "✕";
    x2.classList.add("x");
    div2.appendChild(x2);
    A++;
  }
}

btn.onclick = function () {
  tasks(input1.value);
};
window.onload = function () {
  setInterval(function () {
    $(function strike() {
      $(".x").click(function () {
        {
          $(this).parent().parent().remove();
        }
      });
    }, 2);
  });
};

$(".btn2").click(function () {
  {
    $(".x").parent().parent().remove();
    localStorage.clear();
  }
});
$(".strikeall").click(function () {
  $(".task").toggleClass("strike");
});
$(".btn4").on("click", function () {
  $(".task").click(function () {
    $(this).toggleClass("strike");
  });
});

input1.onfocus = function () {
  text1.classList.add("selected");
  text1.classList.remove("unselected");
};
input1.onblur = function () {
  text1.classList.add("unselected");
  text1.classList.remove("selected");
};

تم التعديل في 17 مارس 2022 بواسطة Hassan Hedr
توضيح العنوان وإضافة الشيفرة

Hassan Hedr · 17 مارس 2022

المشكلة لديك هي في عدم عرض المهام المخزنة سابقًا عند عرض الصفحة في البداية، لذا يجب عليك جلب تلك المهام المخزنة مسبقا وعرضها فور تحميل الصفحة،

يمكن حل المشكلة عبر كتابة تابع يقوم باستخراج المهام المخزنة والمرور عليها وإضافتها للصفحة بشكل مشابه لتابع إضافة المهمة لكن بدون عملية التخزين، وتنفيذه فورًا كالتالي:

function init() {
  // جلب المهام المخزنة سابقًا
  const tasks = Object.values({ ...localStorage });
  
  // عرض كل مهمة من المهام
  for (const task of tasks) {
    var div = document.createElement("div"),
      div2 = document.createElement("div"),
      div1 = document.createElement("div"),
      p = document.createElement("span"),
      x2 = document.createElement("span");
    container.appendChild(div).appendChild(div1);
    div.classList.add("content");
    div.appendChild(div2);
    p.innerText = task;
    p.classList.add("task");
    div1.appendChild(p);
    x2.innerText = "✕";
    x2.classList.add("x");
    div2.appendChild(x2);
  }
}

// تنفيذ تابع عرض المهام المخزنة
init()

(يرجى عند إرفاق سؤالك في المرات القادمة إرفاق الشيفرة في كل من صفحة HTML و جافاسكريبت ضمن نص السؤال)

شرف الدين حفني · 16 مارس 2022

برجاء وضع الشفرة البرمجية التي فيها مشكلة في تعليق بدلًا من إرفاق الملفات

مشكلة في عدم تحميل المعلومات المخزنة في localStorage في جافاسكريبت

السؤال

Mohamed Lotfi

2 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

شرف الدين حفني

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية