前端购物车功能将数据存储在哪里,html实现添加购物车功能

　　在家休陪产假，无聊，看了看以前的项目，突然发现以前写的购物车都是数据库实现的。数据库实现购物车原则上没有问题，但是需要和数据库进行交互，不经意间降低了程序的效率。今天，这是突发奇想。如果能通过HTML5本地存储实现，程序效率会大大提高。当然，HTML5本地存储涉及到各种浏览器的兼容性和存储数据的大小(NKB)。这里需要说明的是：如果你做一个适度的微商城项目，那么你可以尝试使用HTML5本地存储过程来实现购物车！

　　本节讨论HTML5本地存储实现购物车的功能！

　　需要说明的是：上一节转发了别人的博客：HTML5本地存储用法，本节利用上一节的知识实现购物车！

　　首先讲解下大致思路：

　　在一个商品表中，商品的ID是不同的。这里，我们使用商品的ID作为JSON的键值来存储购物车数据。

　　具体例子如下：

　　当您点击“加入购物车”时，执行代码如下：

　　var pid=$(#hidpid )。val()；var color=$(#Procolor )。val()；var num2=$(#spanNum )。html()；//\\\\ var bat={ num :num 2， pid: pid， p color :color }；var bat string=JSON . stringify(bat)；var keyName= bat pidfor(var I=0；I本地存储.长度；I){ if(local storage . key(I)==keyName){ local storage . remove item(keyName)；} } local storage . setitem( bat PID，bat string)；大致解释一下：

　　PID:商品ID

　　颜色：商品颜色

　　Num2:商品数量

　　Bat:Json对象

　　bat string:JSON对象转换成的字符串

　　FOr循环：遍历当前所有的本地存储，删除现有的本地存储，重新建立最新的本地存储。当然，你不必删除它们，因为同名的键值，新的会覆盖旧的。

　　最后，动态存储，所谓动态，就是本地存储的键值和商品ID的组合。也就是说，不同的商品会被存储为不同的键值，n个商品会被存储为n个Json字符串。最后，我们只需要解析这N个不同的字符串，我们就会得到一个完整的购物车！

　　嘻嘻，简单！

　　那么如何遍历这N个JSON字符串呢？如下所示：

　　购物车加载页面：

　　$(function(){ for(var I=0；I本地存储.长度；I){ var local value=local storage . getitem(local storage . key(I))；var key=local storage . key(I)；如果(关键！= bat key . index of( bat )=0){ var obj=$。parse JSON(local value)；var pid=obj.pidvar num=obj.numvar color=obj . p color；Console.log(商品ID: PID 商品数量： num 商品颜色： color))；} } });一般解释：

　　遍历所有本地存储，并要求键值包含bat子字符，剪切不同于bat的本地存储。避免与其他系统的本地存储冲突，所以要求键值必须包含Bat。

　　将Json字符串转换为Json对象

　　并输入产品ID、产品数量和产品颜色。

　　有了产品ID、产品颜色和产品数量，我们就可以使用JS或AJax加载本地存储的购物车。具体加载方法如下：

　　$.ajax( .)

　　或者：

　　JS拼接HTML

　　这里：没有演示。

　　好了，至此，整个HTML5本地存储购物车已经完成。如果还可以，请赞一下！

　　继续完善这个博客。

　　文中提到需要AJAX或者JS拼接来完成加载功能。下面，我来贴出我自己的Ajax！

　　JS代码如下：

　　$(function(){ var carAry=new Array()；for(var I=0；我本地存储。长度；I){ var key=本地存储。关键(一)；var本地值=本地存储。getitem(key)；如果（关键！=蝙蝠键。的索引( bat )=0){ var obj=$ .解析JSON(本地值)；//var PID=obj。PID//var num=obj。num//var color=obj。p色；//console.log(商品ID:“PID”商品数量：数字商品颜色：颜色);卡拉里。push(obj)；} }//alert(carary。长度)；var bat={ carAry :carAry }；$.post(/home/GetCarInfo ，bat，function (data) { $(#buycar ).html(数据);});$.post(/home/GetCarInfo2 ，bat，function(data){ var AryStr=new Array()；AryStr=数据。拆分( _ )；$(#tops ).html(p合计：@ AryStr[0]元/pspan(共AryStr[1]件，不含运费)/span )})；});控制器部分：

　　【http post】public string GetCarInfo(dictionary string，string[]carAry){ UserCarModel model=new UserCarModel()；返回模型GetCarInfo(卡拉里)；}[http post]public string getcarinfo 2(dictionary string，string[]carAry){ UserCarModel model=new UserCarModel()；返回模型GetCarInfo(carAry，1)；}模型部分

　　公共字符串GetCarInfo(Dictionarystring，string[] carAry，int i=0) { System .文字。StringBuilder sb=新系统正文。StringBuilder(" ")；双和=0.00;if (i==0) { //加载购物车如果(carAry！=空carAry .长度0) { sb .追加(‘ul’)；foreach(carAry中的var item){ string PID=item[ PID ]；string num=item[ num ]；string p color=item[ p color ]；productMol=bll .GetModel(Convert .toint 32(PID))；string picPath=getMainpic(product mol。mainpicnum)；某人(有人的简写)append(@ Li class= clear-both div class= proInfo div class= thumb img src= picPath @ //div class= desc clear-both p product mol .产品名称@ /p小号颜色分类： p color @ /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 )；某人.追加(/ul )；else { sb .Append(ulli onclick=gobuy2()请选择所需购买的商品/LiBr//ul )；} } else { //计算总金额和商品数量如果(carAry！=空carAry .长度0){ foreach(carAry中的var item){ string PID=item[ PID ]；string num=item[ num ]；productMol=bll .GetModel(Convert .toint 32(PID))；总和=转换.到加倍(产品摩尔。商店价格)*转换.双倍(数字);某人.追加（总和ToString(0.00) _ carAry .长度);}回某人.ToString()；}效果图如下：

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。