تحليل طريقة تنفيذ وظيفة عربة التسوق باستخدام JavaScript و Cookie

النص

هذا المقال يشرح كيفية تحقيق وظيفة عربة التسوق باستخدام js + cookie. يُشارك معكم للاستفادة، وتفاصيلها كالتالي:

هنا يتم استخدام js + cookie لتحقيق وظيفة عربة التسوق البسيطة.

أولاً، هي بنية HTML بسيطة، فقط لشرح الوظيفة.
  <ul>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="إضافة"</li>
إضافة إلى عربة التسوق"></li>
</ul>
<a href="صفحة عرض عربة التسوق.html" rel="external nofollow" >استعرض عربة التسوق</a>

النص التالي هو الكود الذي يتم من خلاله إضافة معلومات المنتج إلى ملفات الكوكيز عند الضغط على زر الإضافة، ويحتوي على التعليقات بشكل مفصل، حيث قمت بتعيين عمليات ملفات الكوكيز (تعيين واسترجاع) كأساليب في كائن cookieUtil لسهولة الاستدعاء.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //تحديد ما إذا كان الكوكيز موجودًا أو هو المرة الأولى لإضافة
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //مرور على كل عنصر input لإضافة حدث النقر
      for (var j = 0; j < input.length; j++) {
        input[j].onclick = function () {
          var g_id = this.parentNode.children[0].innerHTML;
          var g_name = this.parentNode.children[1].innerHTML;
          var g_price = this.parentNode.children[2].innerHTML;
          //مرور على الكوكيز لتحديد ما إذا كان المنتج موجودًا
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //إذا كان المنتج موجودًا،زيادة عدد المنتج ب 1
              arr[i].num++;
              break;//انتهاء الفحص فوراً
            }
          }
          //إذا كان قيمة i تساوي طول القائمة،فإنه يعني أن عملية البحث انتهت دون أن يدخل الجسم في الشروط if
          //لا يوجد الكوكيز للمنتج،أنشئ جسم منتج جديد وأضفه إلى القائمة
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //تحويل القائمة المعدلة إلى سلسلة JSON ووضعها في الكوكيز
          var date = new Date();
          date.setDate(date.getDate() + 10); //حفظ لعشرة أيام
  //حفظ الكوكيز
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

هذا هو جسم cookieUtil الم封装

//cookie Util
var cookieUtil = {
  //اضافة الكوكيز
  setCookie: function (name, value, expires) {
    var cookieText = encodeURIComponent(name) + "=" + 
encodeURIComponent(value);
    if (expires && expires instanceof Date) {
      cookieText += "; expires=" + expires;
    }
    // if (domain) {
    //   cookieText += "; domain=" + domain;
    // }
    document.cookie = cookieText;
  },
  //الحصول على ملف التعريف
  getCookie: function (name) {
    var cookieText = decodeURIComponent(document.cookie);
    var cookieArr = cookieText.split("; ");
    for (var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split("=");
      if (arr[0] == name) {
        return arr[1];
      }
    }
    return null;
  },
  //حذف ملف التعريف
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
  }
};

الكود الموجود أعلاه واضح للغاية، والصفحة التالية هي التي تستخرج معلومات المنتجات من ملف التعريف (cookie).

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>عرض صفحة عربة التسوق</title>
  <script src="../Utils.js"></script>
  <script>
    onload = function () {
      var ul = document.getElementsByTagName("ul")[0];
      var arr = cookieUtil.getCookie("car");
      if (arr) {
        arr = JSON.parse(arr);
        //إذا كان هناك کوکی، يتم استخراجه وإظهاره على الصفحة
        for (var i = 0; i < arr.length; i++) {
          //كل عنصر قائمة يمثل عنصر منتج
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "اسم المنتج: " + goods.g_name + "، عدد
كمية" + goods.num + "، سعر المنتج: " + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("لا يوجد منتجات في عربة التسوق!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

للمزيد من المعلومات المتعلقة بـ JavaScript، يمكن للقراء المهتمين بالاطلاع على موضوعات هذا الموقع: "تحليل وتقنيات بيانات هيكلية JavaScript"، "تحليل وتقنيات مرور JavaScript"، "تحليل وتقنيات البحث JavaScript"، "تحليل وتقنيات تأثير الحركة والتحكم في JavaScript"، "تحليل وتقنيات الخطأ والتعديل JavaScript"، و "تحليل وتقنيات الحسابات الرياضية JavaScript".

آمل أن يساعدك ما ذكرته في هذا المقال في تصميم برامج JavaScript.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق الطبيعية بالملكية، ويتم جمع المحتوى من قبل المستخدمين على الإنترنت بشكل طوعي وتحميله بشكل مستقل، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت أن هناك محتوى يخالف حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، فإن هذا الموقع سيرحل عن المحتوى المزعوم.