localStorage购物车（升级一下）

Posted 2020-10-05 Harry-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStorage购物车（升级一下）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style type="text/css" media="screen">
        th,td{
          border:1px solid #ccc;
          padding:0 50px;
          height:30px;
          line-height:30px;
          text-align:center;


        }
        table{
            border-collapse:collapse
        }
        .fl{
            float:left;
            margin-right:10px;
        }
        i{
            font-style:normal;
        }

        .gouwuche{
            width:100px;
            height:50px;
            border:1px solid #ccc;

            margin-top:100px;
            position:relative;
        }

        .list{
            width:610px;
            position:absolute;
            top:50px;
            left:0;
            min-height:100px;
            border:1px solid #ccc;
        }

        .list>div{
            float:left;
            width:100%;
            height:30px;
        }
        .list>div>div{
            float:left;
            margin-right:0;
            text-align:center;
            height:100%;
            width:120px;
            border:1px solid #ccc;
        }
        
    </style>
</head>
<body>
<table style="border:1px solid #ccc">
<tr>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品数量</th>
    <th>商品操作</th>
    <th></th>
</tr>
<tr class="line">
    <td>中裤衩</td>
    <td>&yen;300</td>
    <td>100</td>
    <td>

        <div class="de">
            <div class="fl jian">
                减            
            </div>
            <i class="fl num">1</i>
            <div class="fl jia">
                加        
            </div>        
        </div>
    </td>
    <td>
        <button type="" onclick="demo(this)" mingcheng="中裤衩" jiage="300" shuliang="100">加入购物车</button>
    </td>
</tr>
<tr class="line">
    <td>小裤衩</td>
    <td>&yen;300</td>
    <td>100</td>
    <td>

        <div class="de">
            <div class="fl jian">
                减            
            </div>
            <i class="fl num">100</i>
            <div class="fl jia">
                加        
            </div>        
        </div>
    </td>
    <td>
        <button type="" onclick="demo(this)" mingcheng="小裤衩" jiage="300" shuliang="100" >加入购物车</button>
    </td>
</tr>
<tr class="line">
    <td>姨妈巾</td>
    <td>&yen;10</td>
    <td>1000</td>
    <td>

        <div class="de">
            <div class="fl jian">
                减            
            </div>
            <i class="fl num">1</i>
            <div class="fl jia">
                加        
            </div>        
        </div>
    </td>
    <td>
        <button type="" onclick="demo(this)" mingcheng="姨妈巾" jiage="300" shuliang="1000" >加入购物车</button>
    </td>
</tr>
<tr class="line">
    <td>奶粉</td>
    <td>&yen;10</td>
    <td>1000</td>
    <td>

        <div class="de">
            <div class="fl jian">
                减            
            </div>
            <i class="fl num">1</i>
            <div class="fl jia">
                加        
            </div>        
        </div>
    </td>
    <td>
        <button type="" onclick="demo(this)" mingcheng="奶粉" jiage="300" shuliang="1000" >加入购物车</button>
    </td>
</tr>
</table>

<div class="gouwuche">
    <div class="result">
        购物车商品类:
        <i class="log">1</i>
        <div class="list">
        

            
        </div>
    </div>
</div>



</body>
<script src="./jquery-3.1.1.min.js"></script>
<script>
    
    $(".jian").click(function(){
        var num=Number($(this).parent(".de").find(".num").text());
        num--;
        if(num<0){
            alert("傻逼，已经不能再减了");
            return false;
        }
        $(this).parent(".de").find(".num").text(num);
    })

    $(".jia").click(function(){
        var num=Number($(this).parent(".de").find(".num").text());
        num++;
        $(this).parent(".de").find(".num").text(num);

    })


    
    function demo(obj){
        var data=JSON.parse(localStorage.getItem("shangp"));
        var nums=$(obj).parent().parent(".line").find(".num").text();//获取所选商品的数量;
        var mingcheng=$(obj).attr("mingcheng");//获取商品名称
        var shuliang=$(obj).attr("shuliang");//商品库存
        var jiage=$(obj).attr("jiage");
        //alert(jiage);
        var dataLIst={"nums":nums,"shuliang":shuliang,"jiage":jiage};
         if(data !=""&&data !=null&&data !=undefined && data !="undefined" && JSON.stringify(data)!="{}"){
                    data[mingcheng]=dataLIst;//
            }else{
                data={};
                    data[mingcheng]=dataLIst;
            }

        var re=JSON.stringify(data);
        localStorage.setItem("shangp",re);


        listPage();
    }

    function listPage(){
        var log=0;
        $(".list").html("");
        var list=JSON.parse(localStorage.getItem("shangp"));
        console.log(list);
        var tip1="";
        for(var i in list){ 
            log++;
            //console.log(i)

            var jiage=list[i].jiage;
            var kucun=list[i].shuliang;
            var shuliang=list[i].nums;
            tip1+=‘<div>‘
                +‘<div>‘
                    +‘商品:‘+i
                +‘</div>‘
                +‘<div>‘
                    +‘价格:‘+jiage
                +‘</div>‘
                +‘<div>‘
                    +‘库存:‘+kucun
                +‘</div>‘
                +‘<div>‘
                    +‘所选数量:‘+shuliang
                +‘</div>‘
                +‘<div onclick="doit(this)"  mingcheng=‘+i+‘>‘
                    +‘删除‘
                +‘</div>‘
                
            +‘</div>‘
        }

        if(log==0){
            tip1="购物车没有数据";
        }

        $(".list").html(tip1)
        $(".log").html(log);
    }


    function doit(r){
        var mingcheng=$(r).attr("mingcheng");
        var data=JSON.parse(localStorage.getItem("shangp"));
        delete data[mingcheng];
        localStorage.setItem("shangp",JSON.stringify(data));
        listPage();
    }


$(document).ready(function(){
    listPage()
})

</script>    

</html>
以上是关于localStorage购物车（升级一下）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 LocalStorage 计算购物车的总价
基于html5 localStorage的购物车JS脚本
购物车原理
localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
前端面试题-
localStorage实现购物车数量单价和结算页面的实时同步