HTML5 التخزين المحلي لتحقيق وظيفة عربة التسوق

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

يناقش هذا القسم وظائف التخزين المحلي HTML5 لتحقيق وظائف سيارات التسوق!

يجب شرحه: الجزء السابق من مدونة الآخرين: استخدام التخزين المحلي HTML5 ، يستخدم هذا القسم معرفة القسم السابق لتحقيق عربة التسوق!

في جدول المنتج ، يختلف معرف المنتج.

أمثلة محددة هي كما يلي:

عند النقر فوق "انضم إلى عربة التسوق" ، يكون رمز التنفيذ كما يلي:

 var pid = $ (#hidpid). ، pcolor: color} ؛ == keyname) {localStorage.RemoveItem (keyname) ؛}} localstorage.setItem (bat+pid ، batstring) ؛

تحت التفسير العام:

PID: معرف السلع

اللون: لون المنتج

Num2: عدد البضائع

الخفافيش: كائن JSON

BatString: تم تحويل السلسلة إلى كائن JSON

للحلقة: تم اجتياز جميع التخزين المحلي الحالي. القديمة.

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

هي هي ، بسيطة!

فكيف يمكنك اجتياز سلسلة n json هذه؟ على النحو التالي:

صفحة تحميل سيارة التسوق:

 $ (function () {for (var i = 0 ؛ i <localstorage.length ؛ i ++) {var localValue = localStorage.getItem (localstorage.key (i)) ؛ var key = localstorage. (مفتاح! + PID + كمية المنتج: + num + لون المنتج: + اللون) ؛}}}) ؛

التفسير العام:

يعبر جميع التخزين المحلي ويتطلب أن القيمة الرئيسية تحتوي على Submix Subix المقطوعة من التخزين المحلي الذي يختلف عن الخفافيش. <تجنب التخزين المحلي المتضارب مع أنظمة أخرى ، لذلك يجب أن يحتوي الطلب على BAT>

تحويل سلسلة JSON إلى كائن JSON

وأدخل معرف المنتج ، وعدد المنتجات ، ولون المنتج.

مع معرف المنتج ولون المنتج وعدد المنتجات ، يمكننا استخدام JS أو AJAX لتحميل عربات التسوق التي قمنا بتخزينها محليًا. طريقة التحميل المحددة هي كما يلي:

$.ajax(...........)

أو:

JS خياطة HTML

هنا: لا مظاهرة.

حسنًا ، حتى الآن ، تم الانتهاء من سعة التخزين المحلية HTML5 بأكملها.

استمر في تحسين هذه المدونة

وذكر أعلاه أنك بحاجة إلى استخدام Ajax أو JS خياطة لإكمال وظيفة التحميل.

رمز JS كما يلي:

 $ (function () {varility = new array () ؛ for (var i = 0 ؛ i <localstorage.length ؛ i ++) {var key = localstorage.key (i) ؛ var localValue = localStorage. getItem (مفتاح) ؛ COOOL = OBJ .PCOLOR ؛ = {carry: carry} ؛ Data) {var arystr = new Array () ؛ <span> (Total ' + arystr [1] +' ، بدون شحن) </span> ')}) ؛}) ؛

جزء وحدة التحكم:

 [httppost] السلسلة العامة getCarinfo (القاموس <string ، string> [] carary) {usercarmodel = new usercarmodel () ؛ ] [] carry) {usercarmodel model = new usercarmodel () ؛

قسم النموذج

 السلسلة العامة getCarinfo (القاموس <string ، string> [] تحميل عربة التسوق (carry! = null && length> 0) {sb.append (<ul>) ؛ السلسلة pcolor = pcolor] ؛ "> <div class = 'thumb'> <img src = ' + picpath + @' /> </viv> <div class = 'desc clear-both'> <p> + ame + @ e </p> < صغير> تصنيف اللون: + pcolor + @</small> <span> ￥ + convert.todouble (productmol.shopprice) .ToString (0.00) + @</span> <div class = 'ctrl-div'> <div class = 'jian'> </viv> <div class = 'num'> + num + @</viv> <div class = 'jia'> </viv> </viv> </div > </li>) ؛} sb.append (</ul>) ؛} آخر {sb.append (<ul> <li onclick = 'gobuy2 ()'> li> <br/> </ul>) ؛ }} آخر {// حساب المبلغ الإجمالي وعدد المنتجات إذا (carary! = null && length> 0) {foreach (var ite in carry) {String pid = item [pid] ؛ ProductMol = bll.getModel (convert.toxt32 (PID)) ؛ carry.length) ؛} return sb.tostring () ؛}

خريطة التأثير هي كما يلي:

ما سبق هو كل محتويات هذا المقال.