At home, accompany maternity leave, boring, look at your previous project, and suddenly found that the shopping carts I wrote before were implemented with databases. There was nothing wrong with the database in principle, but it needs to be interacted with the database. efficiency. Suddenly, if you can use HTML5 local storage, it will greatly increase program efficiency. Of course, HTML5 local storage involves the compatibility of each browser and the size (NKB) of the storage data. What needs to be explained here is: If you do a small micro -mall project, then you can try to use the HTML5 local storage procedure to achieve the shopping cart!
This section discusses the functions of html5 local storage to realize the functions of shopping cars!
It should be explained: the previous part of the blog of others: html5 local storage usage, this section uses the knowledge of the previous section to realize the shopping cart!
First explain the general thinking:In a product table, the ID of the product is different. Here, we use the ID of the product as the key value of the JSON to store the shopping cart data.
Specific examples are as follows:
When you click 'Join the shopping cart ", the execution code is as follows:
var pid = $ (#hidpid). Val (); var color = $ (#proColor). Var Num2 = $ (#spannum) .html (); // � � � varbat = {num : Num2, PID: PID, PCOLOR: Color}; VAR BATSTRING = JSON.STRINGIFY (BAT); VAR Keyname = BAT+PID; for (VAR I = 0; I <LocalStorage.Length; I ++) {if (LOCALSTOR Age.key (i) == Keyname) {localStorage.removeItem (keyName);}} localstorage.setItem (BAT+PID, BATSTRING);Under general explanation:
PID: Commodity ID
color: product color
NUM2: Number of goods
BAT: JSON object
BATSTRING: The string converted into the JSON object
FOR loop: traversed all the current local storage. If the existing local storage is deleted, and the latest local storage is re -established. Of course, it can also be deleted without deleting, because the key value of the same name will cover the old ones.
Finally, dynamic storage, the so -called dynamic, is the combination of local storage Key values and product IDs. In other words, different products will be stored as different key values. N products will be stored as N JSON string. Finally, we only need to analyze this N different string, and we will get a complete shopping cart!
Hee hee, simple!
So how can you traverse this N JSON string? as follows:
Shopping car load page:
$ (function () {for (var I = 0; I <localstorage.length; i ++) {var localValue = localStorage.getItem (localstorage.key (i)); VAR Key = LOCALSTORAGE. key (i); if (key ! = Bat && Key.indexof (BAT)> = 0) {var obj = $ .parsejson (localvalue); var pid = obj.pid; var num = obj.num; var color = obj.pcolor; ID : + Pid + product quantity: + num + product color: + color);}}});General explanation:
It traverses all local storage and requires that the key value contains the BAT submil cut from the local storage that is different from BAT. <Avoid conflicting local storage with other systems, so the request must contain BAT>
Convert json string to JSON object
And enter the product ID, the number of products, the color of the product.
With the product ID, the color of the product, and the number of products, then we can use JS or AJAX to load the shopping carts we stored locally. The specific loading method is as follows:
$.ajax(...........)
or:
Js stitching HTML
Here: No demonstration.
OK, as of now, the entire HTML5 local storage is also finished. If it is okay, just like it!
Continue to improve this blog
It is mentioned above that you need to use AJAX or JS stitching to complete the loading function. Below I post the AJAX I wrote out!
JS code is as follows:
$ (function () {varility = new array (); for (var I = 0; i <localstorage.length; i ++) {var key = localStorage.key (i); VAR LOCALVALUE = LOCALSTORAGE. getItem (key); If (key! = Bat && Key.indexof (BAT)> = 0) {var obj = $ .parsejson (localvalue); // var pid = obj.pid; // var num = obj.num; // var coool = obj .pcolor; //console.log (product ID: + pid + product quantity: + num + product color: + color); carary.push (obj);} //alert (Carary.length); VAR BAT = { Carry: Carry}; $ .post (/Home/Getcarinfo, BAT, Function (data) {$ (#buycar) .html (data);}); $ .post (/Home/Getcarinfo2, BAT, Function (data) {var arystr = new array (); arystr = data.split ('_'); $ (#tops) .html ('<p> Total: ￥' + Arystr [0] + 'Yuan </p> <span > (Total ' + Arystr [1] +', without freight) </span> ')});});Controller part:
[Httppost] Public String Getcarinfo (Dictionary <string, String> [] carary) {Usercarmodel Model = New Usercarmodel (); Return Model.getcarinfo (Carry);} [ht TPPOST] Public String Getcarinfo2 (Dictionary <string, String> [] [] Carry) {usercarmodel model = new usercarmodel (); Return Model.Getcarinfo (carary, 1);}Model section
Public String Getcarinfo (Dictionary <string, String> [] carary, int i = 0) {system.text.stringBuilder sb = new system.Textbuilder (); Double Sum = 0.00 ; if (i == 0) { / / /Load the shopping cart if (Carry! = NULL &&LENGTH> 0) {sb.append (<ul>); Foreach (var it it item in carary) {string pid = item [pid]; string num = item [num]. ; string pColor = item [pColor]; Productmol = BLL.Getmodel (Convert.toint32 (PID)); String Picpath = Getmainpic (PRODUCTMOL.MainPicNum); SB.APPEN D (@<li class = 'Clear-Both's Class = 'Proinfo'> <DIV Class = 'Thumb'> <IMG SRC = ' + PICPATH + @' /> < /DIV> <DIV Class = 'DESC Clear-Both'> <p> + ame + @ e </p> <small> Color classification: + 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 {// Calculate the total amount and the number of products if (carary! = NULL &&LENGTH> 0) {Foreach (VAR Item in Carry) {string pid = item [pid]; string num = item [num]; Productmol = BLL.Getmodel (convert.toxt32 (PID)); Sum += Convert.tod allowance (Productmol.Shoprice) * CONVERT.TO Double (num);}} sb.append (SUM.TOSTRING (0.00) + _ + Carry.length);} Return sb.tostring ();}The effect map is as follows:
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.