HTML5 本地存储实现购物车功能


Posted in HTML / CSS onSeptember 07, 2017

在家休陪产假,无聊,看自己以前的项目,突然发现之前写的购物车都是用数据库实现的,数据库实现购物车原则上没什么问题,但是需要和数据库交互,这样无意之间降低了程序的效率。今天突发奇想,如果能用HTML5本地存储实现,就会大大增高程序效率。当然,HTML5 本地存储涉及到各个浏览器的兼容性,涉及存储数据的大小(NKB)等问题。在这儿需要说明的是:如果你做一个不大不小的微商城项目,那么你可以尝试使用HTML5本地存储过程实现购物车!

本节和大家探讨下HTML5本地存储实现购物车的功能!

需要说明的是:上篇转发了别人的博客:HTML5本地存储用法,本节利用上节知识实现购物车!

首先讲解下大致思路:

一个商品表中,商品的ID是不相同的,在此,我们借助商品的ID作为JSON的key值,来存储购物车数据。

具体示例如下:

HTML5 本地存储实现购物车功能

当你点击‘加入购物车’时,执行代码如下:

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个不同的字符串,就会得到一个完整的购物车!

嘻嘻,简单吧!

那么怎样才能遍历这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本地存储实现购物车也就讲完了,如果还可以,就点个赞吧!

继续完善本篇博客

上文中提到需要用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 本地存储实现购物车功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 #HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 #HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 #HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 #HTML / CSS
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php实现的通用图片处理类
2015/03/24 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
DEFER怎么用?
2006/07/01 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
在Python中使用模块的教程
2015/04/27 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python生成随机红包的实例写法
2019/09/02 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL