A shopping cart written using HTML5 's local storage

Long time did not write the blog park, a lot of knowledge is not recorded;

These days in the development, also wrote a booking platform of micro-site, inside need to write a shopping cart;

Here is the main part of the product information in JSON format in the Sessionstorage, as well as store information is also;

What are the benefits of saving in JSON format, a lightweight transmission, presumably? In addition, if we store the product information separately, it will lead to a number of sessionstorage items, after the implementation in two stores at the same time, it is impossible to distinguish between each store's goods;

If the code is written by itself, there is copyright, so to speak, right, is seen in the software engineer's book;

Not much to say, I like to be on the code;

When we click on the product, we add the item to the shopping cart, which uses the Json.stringfy () and Json.parse () to convert

1 functionAddgood (ID, price, name) {//The product information parameters have been integrated into their functions when the interface is rendered.2         varContact =NewObject ();//objects of a single commodity, temporary media3         varGoodobj =NewObject ();//Commodity Objects4         varMemberFilter =NewArray ();//Product Information5MEMBERFILTER[0] = "id";6MEMBERFILTER[1] = "Name";7MEMBERFILTER[2] = "Sum";8MEMBERFILTER[3] = "Price";9         if(typeof(sessionstorage.good) = = "undefined") {//no goods at this timeTenContact.id =parseint (ID); OneContact.name =name; AContact.sum = 1; -Contact.price =parseint (price); -             varGood =NewArray (); the             varJsontext =json.stringify (Contact, memberfilter); -Good[0] =Json.parse (jsontext); -Sessionstorage.good =json.stringify (good, memberfilter); -  +         } -         Else{//There are goods, to determine whether the goods are stored locally, there are words sum+1 +             //Fetch Data AGoodobj =Json.parse (sessionstorage.good); at             varCon = 0; -              for(vari = 0; I < Goodobj.length; i++) { -                 if(Goodobj[i].id = =ID) { -Goodobj[i].sum = 1 +parseint (goodobj[i].sum); -Sessionstorage.good=json.stringify (Goodobj, memberfilter); -con++; in                      Break; -                 } to             } +             if(con = = 0) {//without the product, create a new one in -Contact.id =parseint (ID); theContact.name =name; *Contact.sum = 1; $Contact.price =parseint (price);Panax Notoginseng  -                 varJsontext =json.stringify (Contact, memberfilter); the                 varGoolen =goodobj.length; +Goodobj[goolen] =Json.parse (jsontext); ASessionstorage.good=json.stringify (Goodobj, memberfilter); the                 +             } -  $         } $}

This is the data format that is stored locally:

　　

*************************************************************************************************************** *

Shopping cart with Add and subtract function, attach the most basic function:

The Shopping cart page is another, redefined here;

 1  var  goodobj = Span style= "Color:rgb (0, 0, 255); >new   Object ();  2  var  money = 03  new   Array ();  4  memberfilter[0] = "id"  5  memberfilter[1] = "name"  6  memberfilter[2] = "sum"  7  memberfilter[3] = "Price"; 

1, the number of goods plus one:

1 functionAdd (ID) {//This method is with the product ID2      for(vari = 0; i < goodobj.length; i++) {//simple traversal, no optimizations3         if(Goodobj[i].id = =ID) {4Goodobj[i].sum = 1 +parseint (goodobj[i].sum);5Sessionstorage.good=json.stringify (Goodobj, memberfilter);6Money = parseint (Money) + parseint (goodobj[i].price);//Total Price7              Break;8         }9     }Ten};

2, the number of goods minus one:

1 functionCut (ID) {2      for(vari = 0; i < goodobj.length; i++) {3         if(Goodobj[i].id = =ID) {4Goodobj[i].sum = parseint (goodobj[i].sum)-1;5Money = parseint (Money)-parseint (goodobj[i].price);6             if(Goodobj[i].sum = = 0) {7Goodobj = Goodobj.del (i);//Delete this item8             }9Sessionstorage.good=json.stringify (Goodobj, memberfilter);Ten              Break; One         } A     } -};

View Code

3, when the product is deleted, that is, the object array operation, then delete an object, it is necessary to refresh the index, or a array[i] may be undefined; this time it will cause a JSON error;

The functions used for deleting products use slice () and concat ();

Explained in W3school:

The slice () method extracts a portion of a string and returns the extracted part with a new string;

The Concat () method is used to concatenate two or more arrays, which does not alter an existing array, but simply returns a copy of the connected array.

The prototype property gives you the ability to add properties and methods to an object.

Here's the code:

1Array.prototype.del =function(n) {2     if(N < 0) 3         return  This;4     Else5         return  This. Slice (0, N). Concat ( This. Slice (n + 1, This. length));6}//This code has reference on-line code, the source does not remember, really embarrassed

View Code

Finally, I want to explain why the JSON in this format, I used AJAX technology to transfer data to the backend, defined a function to parse the format of the JSON, in the middle of a class to temporarily store the information in it, eventually converted to a dataset, so that the data can be easily used

I hope to see the friends of this article can leave your valuable comments, I would like to improve the function!! Thanks for the exchange

Recently in development, I also want someone to communicate