Zu Hause, begleiten Sie Mutterschaftsurlaub, schauen Sie sich Ihr vorheriges Projekt an und stellten plötzlich fest, dass die zuvor geschriebenen Einkaufswagen mit Datenbanken implementiert wurden. Effizienz. Wenn Sie HTML5 lokaler Speicher verwenden können, erhöht sich plötzlich die Programmeffizienz erheblich. Natürlich beinhaltet der HTML5 -Lokalspeicher die Kompatibilität jedes Browsers und die Größe (NKB) der Speicherdaten. Was hier erklärt werden muss, lautet: Wenn Sie ein kleines Mikro -Mall -Projekt durchführen, können Sie versuchen, das HTML5 lokale Speicherprozess zu verwenden, um den Einkaufswagen zu erreichen!
In diesem Abschnitt werden die Funktionen von HTML5 lokaler Lagerung erörtert, um die Funktionen von Einkaufsautos zu verwirklichen!
Es sollte erklärt werden: Der vorherige Teil des Blogs anderer: HTML5 Lokaler Speichergebrauch verwendet in diesem Abschnitt das Wissen des vorherigen Abschnitts, um den Einkaufswagen zu realisieren!
Erklären Sie zuerst das allgemeine Denken:In einer Produkttabelle ist die ID des Produkts anders.
Spezifische Beispiele sind wie folgt:
Wenn Sie auf "den Einkaufswagen beitreten" klicken, lautet der Ausführungscode wie folgt:
var pid = $ (#HIDPID). , Pcolor: color}; == Keyname) {localStorage.removeItem (Keyname);}} localStorage.setItem (bat+pid, batstring);Unter allgemeiner Erklärung:
PID: Rohstoff -ID
Farbe: Produktfarbe
Num2: Anzahl der Waren
Bat: JSON -Objekt
BatString: Die in das JSON -Objekt konvertierte String
Für die Schleife: Durch den aktuellen lokalen Speicher wird der vorhandene lokale Speicher gelöscht, und der neueste lokale Speicher wird natürlich auch gelöscht, da der gleiche Wert derselben Namen gelöscht werden kann. alte.
Schließlich ist der dynamische Speicher, die sogenannte Dynamik, die Kombination aus lokalen Speicherschlüsselwerten und Produkt -IDs. Mit anderen Worten, verschiedene Produkte werden als unterschiedliche wichtige Werte gespeichert. Schließlich müssen wir nur diese n verschiedene Zeichenfolge analysieren, und wir erhalten einen kompletten Einkaufswagen!
Hee Hee, einfach!
Wie können Sie diese N JSON -Saite durchqueren? wie folgt:
Einkaufsauto -Ladenseite:
$ (function () {for (var i = 0; i <localStorage.length; i ++) {var localValue = localStorage.getItem (localStorage.Key (i)); var key = localStorage. key (i); wenn (KEY! + PID + Produktmenge: + Num + Produktfarbe: + Farbe);}}});Allgemeine Erklärung:
Es durchquert den gesamten lokalen Speicher und erfordert, dass der Schlüsselwert den Fledermaus -Untermix enthält, der sich vom lokalen Speicher unterscheidet, der sich von der Fledermaus unterscheidet. <Vermeiden Sie widersprüchlicher lokaler Speicher mit anderen Systemen, daher muss die Anfrage Fledermaus enthalten
Konvertieren Sie die JSON -String in JSON -Objekt
Und geben Sie die Produkt -ID, die Anzahl der Produkte, die Farbe des Produkts ein.
Mit der Produkt -ID, der Farbe des Produkts und der Anzahl der Produkte können wir JS oder AJAX verwenden, um die Einkaufswagen zu laden, die wir lokal gespeichert haben. Die spezifische Lademethode lautet wie folgt:
$.ajax(...........)
oder:
JS Nähen HTML
Hier: Keine Demonstration.
OK, ab sofort ist auch der gesamte HTML5 -Lokalspeicher fertiggestellt.
Verbessern Sie diesen Blog weiterhin
Es wird oben erwähnt, dass Sie AJAX oder JS -Stiche verwenden müssen, um die Ladefunktion zu vervollständigen.
JS -Code lautet wie folgt:
$ (function () {varility = new array (); für (var i = 0; i <localStorage.length; i ++) {var key = localStorage.Key (i); var localValue = localStorage. getItem (key) ; coool = obj .pcolor; = {Carry: Carry}; Daten) {var aryStr = new Array (); <span> (Total ' + AryStr [1] +', ohne Fracht) </span> ')});});Controller -Teil:
[Httppost] public String getCarinfo (Dictionary <String, String> [] Carary) {UserCarmodel modell = new UserCarmodel (); ] [] Carry) {UserCarmodel modell = new UserCarmodel ();Modellabschnitt
Public String getCarinfo (Dictionary <String, String> [] Carary, int i = 0) {System.Text.StringBuilder SB = New System.TextBuilder (); Laden Sie den Einkaufswagen, wenn (Carry! = NULL && Länge> 0) {SB.Append (<ul>); String pcolor = item [pcolor]; '> <Div class =' thumb '> <img src =' + picpath + @ ' /> < /div> <div class =' descle-Both '> <p> + AME + @ e < /p> < klein> Farbklassifizierung: + pcolor + @</small> <span> ￥ + convert.todouble (productMol.shopprice) .ToString (0,00) + @</span> <div class = 'Strg-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 {// Berechnen Sie die Gesamtmenge und die Anzahl der Produkte, wenn (Carary! ProductMol = Bll.getModel (Convert.Text32 (PID)); Carry.length);} return sb.toString ();}Die Effektkarte lautet wie folgt:
Das oben genannte ist der Inhalt dieses Artikels.