HTML5 当地储存完成买东西车作用

日期:2021-02-27 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

在家休陪产假,无聊,看自身之前的新项目,忽然发现以前写的买东西车全是用数据信息库完成的,数据信息库完成买东西车标准上没甚么难题,可是必须和数据信息库互动,这样不经意之间减少了程序流程的高效率。今日心血来潮,假如能用HTML5当地储存完成,就会大大增高程序流程高效率。自然,HTML5 当地储存涉及到到各个访问器的适配性,涉及到储存数据信息的尺寸(NKB)等难题。在这儿必须表明的是:假如你做1个再大的微商城新项目,那末你能够尝试应用HTML5当地储存全过程完成买东西车!

本节和大伙儿讨论下HTML5当地储存完成买东西车的作用!

必须表明的是:上篇转发了他人的blog:HTML5当地储存用法,本节运用上节专业知识完成买东西车!

最先解读下大概思路:

1个产品表格中,产品的ID是不同样的,在此,大家依靠产品的ID做为JSON的key值,来储存买东西车数据信息。

实际示比如下:

当你点一下‘添加买东西车’时,实行编码以下:

 var pid = $("#hidpid").val();
        var color = $("#Procolor").val();
        var num2 = $("#spanNum").html(); //����
        var bat = { "num": num2, "pid": pid, "pcolor": color };
        var batString = JSON.stringify(bat);
        var keyName = "bat" + pid;
        for (var i = 0; i < localStorage.length; i++) {
            if (localStorage.key(i) == keyName) {
                localStorage.removeItem(keyName);
            }
        }
        localStorage.setItem("bat"+pid, batString);

大概解读下:

Pid:产品ID

color:产品色调

num2:产品数量

bat:Json目标

batString:Json目标转换成的标识符串

FOr循环系统:遍历当今全部当地储存,假如已存在的当地储存则删掉,再次创建全新的当地储存,自然,还可以不删掉,由于同名的Key值,新的会遮盖旧的。

最终,动态性储存,所谓动态性,便是当地储存的Key值和产品ID融合了。也便是说:不一样的产品,可能储存为不一样的Key值,N个产品,可能储存为N个Json标识符串。最终,大家只需分析这N个不一样的标识符串,就会获得1个详细的买东西车!

嘻嘻,简易吧!

那末如何才可以遍历这N个JSON标识符串呢?以下:

买东西车载入网页页面:

 $(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;
                        console.log("产品ID:"+pid + "产品数量:" + num + "产品色调:" + color);
                    }
                }
            });



大概解读:

遍历全部当地储存,规定key值包括bat子标识符切不一样于bat的当地储存。<防止和别的系统软件当地储存相矛盾,因此,规定Key值务必包括Bat>

将Json标识符串转换为Json目标

并键入产品ID,产品数量,产品色调。

有了产品ID,产品色调,产品数量,那末大家便可以应用JS或AJax来载入大家当地储存的买东西车了。实际载入方式以下:

 $.ajax("...........")

或:

JS拼接HTML

在此:不作演试。

OK,截止到如今,全部HTML5当地储存完成买东西车也就讲完了,假如还能够,就点个赞吧!

再次健全本篇blog

上文中提到必须用Ajax或JS拼接来进行载入作用,下面我将自身写的AJAX贴出来!

JS编码以下: 

$(function () {
                var carAry=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 color = obj.pcolor;
                        //console.log("产品ID:" + pid + "产品数量:" + num + "产品色调:" + color);
                        carAry.push(obj);
                      
                    }
                }
                //alert(carAry.length);
                var bat = { "carAry": carAry };
                $.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>累计:¥' + AryStr[0] + '元</p><span>(共' + AryStr[1] + '件,不含运费)</span>')
                });

            });

操纵器一部分:

   [HttpPost]
        public string GetCarInfo(Dictionary<string,string>[] carAry)
        {
            UserCarModel model = new UserCarModel();

            return model.GetCarInfo(carAry);
        }

        [HttpPost]
        public string GetCarInfo2(Dictionary<string, string>[] carAry)
        {
            UserCarModel model = new UserCarModel();

            return model.GetCarInfo(carAry,1);
        }

Model一部分 

  public string GetCarInfo(Dictionary<string, string>[] carAry,int i=0)
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder("");
            double sum = 0.00;
            if (i == 0)
            {
                //载入买东西车
                if (carAry != null && carAry.Length > 0)
                {
                    sb.Append("<ul>");
                    foreach (var 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.Append(@"<li class='clear-both'>
                    <div class='proInfo'>
                        <div class='thumb'>
                            <img src='" + picPath + @"' /></div>
                        <div class='desc clear-both'>
                            <p>" + productMol.productName + @"</p>
                            <small>色调归类:" + 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>
                    </div>
                </li>");
                    }
                    sb.Append("</ul>");
                }
                else
                {
                    sb.Append("<ul><li onclick='gobuy2()'>请挑选所需选购的产品</li><br/></ul>");
                }
            }
            else
            {
                //测算总额度和产品数量
                if (carAry != null && carAry.Length > 0)
                {
                    foreach (var item in carAry)
                    {
                        string pid = item["pid"];
                        string num = item["num"];
                        productMol = bll.GetModel(Convert.ToInt32(pid));
                        sum += Convert.ToDouble(productMol.shopprice) * Convert.ToDouble(num);
                    }
                }
                sb.Append(sum.ToString("0.00") + "_" + carAry.Length);
            }
            return sb.ToString();
        }

实际效果图以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:html5应用Canvas制图的应用方式 返回下一篇:没有了