原生js方法购物车完整实现利用localStorage

最新推荐文章于 2022-10-30 13:23:13 发布

原创

最新推荐文章于 2022-10-30 13:23:13 发布 · 1.5k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #css #javascript #html5

利用localStorage实现

html页面3个分别是
productList 产品列表 details产品详情页 cartList购物车页面

1.productList.html 页面
 <style>
        body,ul ,li{
   
   
            padding: 0;
            margin: 0;
        }
        li{
   
   
            list-style: none;
        }
        #productDatas li{
   
   
            float: left;
            width: 220px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
        .btn{
   
   
            border: none;
            width: 120px;
            height: 30px;
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul id="productDatas">
      <!--   <li>//模板写出  注释掉 
            <img src="../img/1.jpg" alt="">
            <p>标题</p>
            <p>价格</p>
            <input type="button" value="加入购物车" class="btn"> 
        </li>
        <li>
            <img src="../img/1.jpg" alt="">
            <p>标题</p>
            <p>价格</p>
            <input type="button" value="加入购物车" class="btn"> 
        </li>
        <li>
            <img src="../img/1.jpg" alt="">
            <p>标题</p>
            <p>价格</p>
            <input type="button" value="加入购物车" class="btn"> 
        </li> -->
    </ul>
</body>
        <script src="../js/cart.js"></script>
    <script>
      /*   let productDatas={//先把商品基本信息列出来，然后利用localStorage存到本地 就可以注释掉
            "10001":{
                id:10001,
                imgsrc:"../img/1.jpg",
                title:"商品1",
                price:100    
            },
            "10002":{
                id:10002,
                imgsrc:"../img/2.jpg",
                title:"商品2",
                price:200    
            },
            "10003":{
                id:10003,
                imgsrc:"../img/3.jpg",
                title:"商品3",
                price:300    
            }
        }
        localStorage.setItem("productDatas",JSON.stringify(productDatas));
         */
			//取到本地商品信息，实际开发是从服务器取数据
        let productDatas=JSON.parse(localStorage.getItem("productDatas"));

        let oProduct=document.getElementById("productDatas");
        let str="";
         for(let id in productDatas){
   
   //利用模板字符串把商品信息显示出来
            str+=`  
            <li>
           <a href="details.html?id=${
     
     id}">  <img src="${
     
     productDatas[id].imgsrc}" alt=""></a>
            <p>${
     
     productDatas[id].title}</p>
            <p>${
     
     productDatas[id].price}</p>
            <input type="button" value="加入购物车" class="btn" data-id="${
     
     id}"> 
            </li>
            `;
         }
         oProduct.innerHTML=str;

         let cart=new Cart();  //调用购物车类
         let oInput=document.querySelectorAll("input"