ที่บ้านพร้อมกับการลาคลอด, น่าเบื่อ, ดูโครงการก่อนหน้าของคุณและทันใดนั้นก็พบว่าตะกร้าสินค้าที่ฉันเขียนก่อนหน้านี้ถูกนำไปใช้กับฐานข้อมูล ประสิทธิภาพ. ทันใดนั้นหากคุณสามารถใช้ที่เก็บข้อมูลท้องถิ่น HTML5 มันจะเพิ่มประสิทธิภาพของโปรแกรมอย่างมาก แน่นอนว่าพื้นที่เก็บข้อมูลท้องถิ่น HTML5 เกี่ยวข้องกับความเข้ากันได้ของแต่ละเบราว์เซอร์และขนาด (NKB) ของข้อมูลการจัดเก็บ สิ่งที่ต้องอธิบายที่นี่คือ: หากคุณทำโครงการขนาดเล็กขนาดเล็กคุณสามารถลองใช้ขั้นตอนการจัดเก็บข้อมูลท้องถิ่น HTML5 เพื่อให้ได้ตะกร้าสินค้า!
ส่วนนี้กล่าวถึงฟังก์ชั่นของ HTML5 Local Storage เพื่อรับรู้ฟังก์ชั่นของรถช็อปปิ้ง!
มันควรจะอธิบาย: ส่วนก่อนหน้าของบล็อกของคนอื่น ๆ : การใช้พื้นที่จัดเก็บในท้องถิ่น HTML5 ส่วนนี้ใช้ความรู้ในส่วนก่อนหน้านี้เพื่อตระหนักถึงตะกร้าสินค้า!
ก่อนอื่นอธิบายความคิดทั่วไป:ในตารางผลิตภัณฑ์ ID ของผลิตภัณฑ์นั้นแตกต่างกัน
ตัวอย่างเฉพาะมีดังนี้:
เมื่อคุณคลิก 'เข้าร่วมตะกร้าสินค้า "รหัสการดำเนินการมีดังนี้:
var pid = $ (#hidpid) , pcolor: color}; == keyname) {localstorage.removeitem (keyname);}} localstorage.setItem (bat+pid, batstring);ภายใต้คำอธิบายทั่วไป:
PID: รหัสสินค้า
สี: สีผลิตภัณฑ์
NUM2: จำนวนสินค้า
ค้างคาว: วัตถุ JSON
Batstring: สตริงที่แปลงเป็นวัตถุ JSON
สำหรับลูป: ผ่านที่เก็บข้อมูลท้องถิ่นทั้งหมดในปัจจุบัน คนเก่า.
ในที่สุดการจัดเก็บแบบไดนามิกที่เรียกว่าไดนามิกคือการรวมกันของค่าคีย์การจัดเก็บในท้องถิ่นและรหัสผลิตภัณฑ์ กล่าวอีกนัยหนึ่งผลิตภัณฑ์ที่แตกต่างกันจะถูกเก็บไว้เป็นค่าคีย์ที่แตกต่างกัน ในที่สุดเราต้องวิเคราะห์สตริงที่แตกต่างกันและเราจะได้รับตะกร้าสินค้าที่สมบูรณ์!
ฮีฮีเรียบง่าย!
แล้วคุณจะสำรวจสตริง n json นี้ได้อย่างไร? ดังนี้:
หน้าโหลดรถช็อปปิ้ง:
$ (function () {สำหรับ (var i = 0; i <localstorage.length; i ++) {var localValue = localstorage.getItem (localstorage.key (i)); var key = localstorage. key. (คีย์! = bat && key.indexof (bat)> = 0) {var obj = $ .parsejson (localValue); + PID + ปริมาณผลิตภัณฑ์: + num + สีผลิตภัณฑ์: + สี);}}});คำอธิบายทั่วไป:
มันผ่านที่เก็บข้อมูลในท้องถิ่นทั้งหมดและต้องการให้ค่าคีย์ประกอบด้วย Submix BAT ที่ตัดจากที่เก็บข้อมูลท้องถิ่นที่แตกต่างจาก BAT <หลีกเลี่ยงการจัดเก็บในท้องถิ่นที่ขัดแย้งกับระบบอื่นดังนั้นคำขอจะต้องมี BAT>
แปลงสตริง JSON เป็นวัตถุ JSON
และป้อนรหัสผลิตภัณฑ์จำนวนผลิตภัณฑ์สีของผลิตภัณฑ์
ด้วยรหัสผลิตภัณฑ์สีของผลิตภัณฑ์และจำนวนผลิตภัณฑ์จากนั้นเราสามารถใช้ JS หรือ AJAX เพื่อโหลดตะกร้าสินค้าที่เราเก็บไว้ในพื้นที่ วิธีการโหลดเฉพาะมีดังนี้:
$.ajax(...........)
หรือ:
JS เย็บ HTML
ที่นี่: ไม่มีการสาธิต
ตกลง ณ ตอนนี้พื้นที่เก็บข้อมูลท้องถิ่น HTML5 ทั้งหมดเสร็จสิ้นเช่นกัน
ปรับปรุงบล็อกนี้ต่อไป
มีการกล่าวถึงข้างต้นว่าคุณต้องใช้ AJAX หรือ JS STITCHING เพื่อทำฟังก์ชั่นการโหลดให้เสร็จ
รหัส JS มีดังนี้:
$ (function () {varility = new Array (); สำหรับ (var i = 0; i <localstorage.length; i ++) {var key = localstorage.key (i); var localValue = localstorage. getItem (คีย์) ถ้า (คีย์! = bat && key.indexof (bat)> = 0) {var obj = $ .parsejson (localValue); COOL = OBJ .PCOLOR; = {พกพา: พกพา}; ข้อมูล) {var arystr = new Array (); <span> (ทั้งหมด ' + arystr [1] +' โดยไม่มีค่าขนส่ง) </span> ')});});ส่วนคอนโทรลเลอร์:
[httppost] สตริงสาธารณะ getCarinfo (พจนานุกรม <สตริง, สตริง> [] carary) {usercarmodel model = ใหม่ usercarmodel (); ] [] พกพา) {usercarmodel model = new UserCarmodel ();ส่วนรุ่น
Public String getCarinfo (พจนานุกรม <สตริง, สตริง> [] carary, int i = 0) {system.text.stringbuilder sb = ใหม่ system.textbuilder (); โหลดตะกร้าสินค้าถ้า (พกพา! = null && ความยาว> 0) {sb.append (<ul>); String pcolor = item [pcolor]; '> <div class =' thumb '> <img src =' + picpath + @ ' /> < /div> <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'> </div> <div class = 'num'> + num + @</div> <div class = 'jia'> </div> </div> </div > </li>);} sb.append (</ul>);} else {sb.append (<ul> <li onclick = 'gobuy2 ()'> li> <br/> </ul>); }} else {// คำนวณจำนวนเงินทั้งหมดและจำนวนผลิตภัณฑ์ถ้า (carary! = null && length> 0) {foreach (รายการ var ในพกพา) {string pid = item [pid]; ProductMol = BLL.GetModel (Convert.TOXT32 (PID)); carry.length);} ส่งคืน sb.toString ();}แผนที่เอฟเฟกต์มีดังนี้:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้