إنشاء عربة تسوق مع تخزين الويب HTML5

مع ظهور HTML5 ، تمكنت العديد من المواقع من استبدال مكوّن JavaScript الإضافي والرموز برموز HTML بسيطة أكثر كفاءة مثل الصوت والفيديو وتحديد الموقع الجغرافي وما إلى ذلك. جعلت علامات HTML5 مهمة المطورين أسهل بكثير مع تحسين وقت تحميل الصفحة وأداء الموقع. على وجه الخصوص ، كان تخزين HTML5 على الويب بمثابة تغيير في اللعبة لأنها تسمح لمتصفحات المستخدمين بتخزين بيانات المستخدم دون استخدام خادم. لذلك ، سمح إنشاء التخزين على الويب لمطوري الواجهة الأمامية بإنجاز المزيد على موقع الويب الخاص بهم دون معرفة أو استخدام الترميز من جانب الخادم أو قاعدة البيانات.

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

تعتمد العديد من مواقع الويب عالية الحركة على تقنيات معقدة مثل تجميع الخادم ، وموازن تحميل DNS ، والتخزين المؤقت من جانب العميل والخادم ، وقواعد البيانات الموزعة ، والخدمات المصغرة لتحسين الأداء والتوافر. في الواقع ، يتمثل التحدي الرئيسي للمواقع الديناميكية في جلب البيانات من قاعدة بيانات واستخدام لغة من جانب الخادم مثل PHP لمعالجتها. ومع ذلك ، يجب استخدام تخزين قاعدة البيانات عن بُعد فقط لمحتوى موقع الويب الأساسي ، مثل المقالات وبيانات اعتماد المستخدم. يمكن تخزين ميزات مثل تفضيلات المستخدم في متصفح المستخدم ، على غرار ملفات تعريف الارتباط. وبالمثل ، عند إنشاء تطبيق محمول أصلي ، يمكنك استخدام تخزين الويب HTML5 جنبًا إلى جنب مع قاعدة بيانات محلية لزيادة سرعة تطبيقك. وبالتالي ، كمطورين للواجهة الأمامية ، نحتاج إلى استكشاف الطرق التي يمكننا من خلالها استغلال قوة تخزين الويب HTML5 في تطبيقاتنا في المراحل الأولى من التطوير.

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

خلفية المشروع

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

ملاحظة : لكي تتمكن من متابعة هذا البرنامج التعليمي ، يلزم توفر معرفة أساسية بـ HTML5 و CSS و JavaScript.

ملفات المشروع

انقر هنا لتنزيل ملفات مصدر المشروع. يمكنك مشاهدة عرض حي أيضًا.

نظرة عامة على تخزين الويب HTML5

يسمح تخزين الويب بتنسيق HTML5 لتطبيقات الويب بتخزين القيم محليًا في المتصفح الذي يمكنه البقاء على قيد الحياة أثناء جلسة المتصفح ، تمامًا مثل ملفات تعريف الارتباط. على عكس ملفات تعريف الارتباط التي يجب إرسالها مع كل طلب HTTP ، لا يتم نقل بيانات تخزين الويب إلى الخادم ؛ وبالتالي ، يتفوق تخزين الويب على ملفات تعريف الارتباط في أداء الويب. علاوة على ذلك ، تتيح لك ملفات تعريف الارتباط تخزين 4 كيلوبايت فقط من البيانات لكل مجال ، في حين أن تخزين الويب يسمح بما لا يقل عن 5 ميغابايت لكل مجال. يعمل تخزين الويب مثل مصفوفة بسيطة ، حيث يتم تعيين المفاتيح للقيم ، ولهما نوعان:

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

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

بناء عربة تسوق أساسية

لبناء عربة التسوق الخاصة بنا ، نقوم أولاً بإنشاء صفحة HTML مع عربة بسيطة لإظهار العناصر ، ونموذج بسيط لإضافة السلة أو تعديلها. بعد ذلك ، نضيف تخزين الويب بتنسيق HTML إليه ، متبوعًا بتشفير JavaScript. على الرغم من أننا نستخدم علامات تخزين HTML5 المحلية ، فإن جميع الخطوات مماثلة لتلك الخاصة بتخزين جلسة HTML5 ويمكن تطبيقها على علامات تخزين جلسة HTML5. أخيرًا ، سنستعرض بعض أكواد jQuery ، كبديل لرمز JavaScript ، للمهتمين باستخدام jQuery.

أضف التخزين المحلي HTML5 إلى عربة التسوق

صفحة HTML الخاصة بنا هي صفحة أساسية ، مع علامات لجافا سكريبت و CSS الخارجية المشار إليها في الرأس.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

يوجد أدناه محتوى HTML الذي يظهر في نص الصفحة:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

إضافة JavaScript إلى عربة التسوق

سننشئ ونستدعى دالة JavaScript doShowAll() في حدث onload() للتحقق من دعم المتصفح ولإنشاء الجدول الذي يعرض زوج اسم التخزين وقيمته ديناميكيًا.

 <body onload="doShowAll()">

بدلاً من ذلك ، يمكنك استخدام حدث JavaScript onload عن طريق إضافة هذا إلى كود JavaScript:

 window.load=doShowAll();

أو استخدم هذا لـ jQuery:

 $( window ).load(function() { doShowAll(); });

في وظيفة CheckBrowser() ، نود التحقق مما إذا كان المستعرض يدعم تخزين HTML5. لاحظ أن هذه الخطوة قد لا تكون مطلوبة لأن معظم متصفحات الويب الحديثة تدعمها.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

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

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

ملاحظة : سيكون لديك أنت أو إطار العمل الخاص بك طريقة مفضلة لإنشاء عُقد DOM جديدة ومعالجة الأحداث. لإبقاء الأمور واضحة ومركزة ، يستخدم .innerHTML ومعالجات الأحداث المضمنة على الرغم من أننا نتجنب ذلك عادةً في كود الإنتاج.

نصيحة: إذا كنت ترغب في استخدام jQuery لربط البيانات ، يمكنك فقط استبدال document.getElementById('list').innerHTML = list; مع $('#list').html()=list; .

قم بتشغيل واختبار عربة التسوق

في القسمين السابقين ، أضفنا رمزًا إلى رأس HTML ، وأضفنا HTML إلى نموذج سلة التسوق وسلة التسوق. أنشأنا أيضًا وظيفة JavaScript للتحقق من دعم المتصفح وملء السلة بالعناصر الموجودة في العربة. عند ملء عناصر السلة ، تجلب JavaScript القيم من تخزين الويب بتنسيق HTML ، بدلاً من قاعدة البيانات. في هذا الجزء ، سنوضح لك كيفية إدراج البيانات في محرك تخزين HTML5. أي أننا سنستخدم التخزين المحلي HTML5 جنبًا إلى جنب مع JavaScript لإدراج عناصر جديدة في عربة التسوق ، وكذلك تحرير عنصر موجود في سلة التسوق.

ملاحظة : لقد أضفت أقسامًا من التلميحات أدناه لإظهار كود jQuery ، كبديل لأقسام جافا سكريبت.

سننشئ عنصر div HTML منفصلًا لالتقاط إدخال المستخدم وإرساله. سنقوم بإرفاق وظيفة JavaScript المقابلة في حدث onClick للأزرار.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

يمكنك تعيين الخصائص على كائن localStorage بشكل مشابه لكائن JavaScript العادي. فيما يلي مثال على كيفية ضبط خاصية التخزين المحلي myProperty على القيمة myValue :

 localStorage.myProperty="myValue";

يمكنك حذف خاصية التخزين المحلي مثل هذا:

 delete localStorage.myProperty;

بالتناوب ، يمكنك استخدام الطرق التالية للوصول إلى التخزين المحلي:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

لحفظ زوج المفتاح والقيمة ، احصل على قيمة كائن JavaScript المقابل واستدعاء طريقة setItem :

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

يوجد أدناه بديل jQuery لوظيفة SaveItem . أولاً ، أضف معرفًا إلى مدخلات النموذج:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

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

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

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

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

يظهر أدناه بديل jQuery.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

سنستخدم طريقة removeItem لحذف عنصر من التخزين.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

نصيحة: على غرار الوظيفتين السابقتين ، يمكنك استخدام محددات jQuery في وظيفة RemoveItem .

هناك طريقة أخرى للتخزين المحلي تسمح لك بمسح التخزين المحلي بالكامل. نسمي وظيفة ClearAll() في حدث onClick لزر "Clear":

 <input type="button" value="Clear">

نستخدم الطريقة clear لمسح التخزين المحلي ، كما هو موضح أدناه:

 function ClearAll() { localStorage.clear(); doShowAll(); }

تخزين الجلسة

يعمل كائن sessionStorage بنفس طريقة localStorage . يمكنك استبدال المثال أعلاه بكائن sessionStorage صلاحية البيانات بعد جلسة واحدة. بمجرد أن يغلق المستخدم نافذة المتصفح ، سيتم مسح التخزين. باختصار ، فإن واجهات برمجة التطبيقات localStorage و sessionStorage متطابقة ، مما يسمح لك باستخدام الطرق التالية:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

عربات التسوق مع المصفوفات والأشياء

نظرًا لأن تخزين HTML5 على الويب يدعم تخزين قيمة الاسم الواحد فقط ، يجب عليك استخدام JSON أو طريقة أخرى لتحويل المصفوفات أو الكائنات إلى سلسلة واحدة. قد تحتاج إلى مصفوفة أو كائن إذا كان لديك فئة وفئات فرعية من العناصر ، أو إذا كان لديك عربة تسوق تحتوي على بيانات متعددة ، مثل معلومات العميل ، ومعلومات العنصر ، وما إلى ذلك ، تحتاج فقط إلى دمج مجموعة أو عناصر كائن في سلسلة لتخزينها في تخزين الويب ، ثم تفجيرها (أو تقسيمها) مرة أخرى إلى مصفوفة لعرضها على صفحة أخرى. دعنا ننتقل إلى مثال أساسي لعربة التسوق التي تحتوي على ثلاث مجموعات من المعلومات: معلومات العميل ومعلومات العنصر والعنوان البريدي المخصص. أولاً ، نستخدم JSON.stringify لتحويل الكائن إلى سلسلة. ثم نستخدم JSON.parse لعكسها مرة أخرى.

تلميح : ضع في اعتبارك أن اسم المفتاح يجب أن يكون فريدًا لكل مجال.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

ملخص

في هذا البرنامج التعليمي ، تعلمنا كيفية إنشاء عربة تسوق خطوة بخطوة باستخدام تخزين الويب HTML5 وجافا سكريبت. لقد رأينا كيفية استخدام jQuery كبديل لجافا سكريبت. لقد ناقشنا أيضًا وظائف JSON مثل Stringify والتحليل للتعامل مع المصفوفات والكائنات في عربة التسوق. يمكنك البناء على هذا البرنامج التعليمي عن طريق إضافة المزيد من الميزات ، مثل إضافة فئات المنتجات والفئات الفرعية أثناء تخزين البيانات في مصفوفة JavaScript متعددة الأبعاد. علاوة على ذلك ، يمكنك استبدال كود JavaScript بالكامل بـ jQuery.

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

في الختام ، إليك بعض المشكلات التي يجب مراعاتها عند تنفيذ تخزين الويب HTML5:

• قد يكون لدى بعض المستخدمين إعدادات خصوصية تمنع المتصفح من تخزين البيانات.
• قد يستخدم بعض المستخدمين متصفحهم في وضع التصفح المتخفي.
• كن على دراية ببعض مشكلات الأمان ، مثل هجمات انتحال DNS ، وهجمات عبر الدلائل ، واختراق البيانات الحساسة.

القراءة ذات الصلة

• "حدود تخزين المتصفح ومعايير الإخلاء" ، مستندات الويب MDN ، Mozilla
• "تخزين الويب" ، HTML Living Standard ،
• "هذا الأسبوع في HTML 5 ،" مدونة WHATWG