将添加购物车数据存储到浏览器cookie中面向过程·

页面效果

cookie中查看数据第一个值为商品id 第二个值为数量

需求：当点击加入购物车按钮时获取商品在cookie中数据如果没有则添加有则数量加加

html代码

    <div id="cont">

    </div>

css代码

	*{
        margin: 0;
        padding: 0;
      }
			#cont{
                width: 1000px;
                overflow: hidden;
                margin: 30px auto;
               
               
            }
			.box{
                width: 250px;
                border: 1px solid #f2f2f2;
                box-sizing: border-box;
                text-align: center;
                float: left;
                }
			.box img{
                width: 90%;
                display: block;
                margin: 10px auto;
            }
			.box span{
                display: block;
                color: red;
                }
			.box p{
                height: 52px;
                overflow: hidden;
                 font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
                line-height: 26px;
                }
             .btn-lg {
                    height: 30px;
                    line-height: 30px;
                    padding: 0 26px;
                    font-size: 18px;
                    font-family: "microsoft yahei";
                    margin-bottom: 5px;
                }
                .btn-special1{
                    font-weight: 700;
                }
                .btn-special1 {
                    background-color: #df3033;
                    color: #fff;
                }
                .btn-special1{
                    display: inline-block;
                    text-align: center;
                    vertical-align: middle;
                    cursor: pointer;
                }
                a{
                    color: #666;
                    text-decoration: none;
                }

js代码

要拿到cookie中的数据要封装一个cookie js 设置保存数据拿取数据

cookie.js

let cookie ={
    /**
     存cookie 
     document.cookie = 'key = val ; expires = time'
     过期时间单位：min
     */
    setCookie(key,val,time = null){
        //判断参数是否为空 为空直接返回不执行接下来的代码
        if(!key || !val) return;
        //判断是否设置过期时间
        let exp ='';
        if(time){
            //实例化时间对象
            let date = new Data();
            //获取当前毫秒
            let nowT = date.getTime();
            //设置过期的时间 ms
            date.setTime(nowT + time*60*1000);
            //转化时区
            let gmt = date.toGMTString();
            exp = ';expires=' +gmt
        }
        //写入cookie中
        document.cookie = key +'='+val +exp;
    },
    //取出cookie 用map遍历
    getCookie(key){
        //判断值是否为空
        if(!key) return;
        //取出所有cookie
        let cookie = document.cookie;
        if(!cookie) return null;
        //cookie取出值为字符串 要将其分割为数组
        cookie = cookie.split(';')
        return(cookie.map(item=>{
            //找出包含目标key的字符串
            if(item.trim().indexOf(key)==0){
                //分割且返回目标值
                return (item.split('='))[1]
            }
            //join() 方法将数组作为字符串返回。
        })).join('')
    }
}

创建json数组写入商品信息引入cookie.js

  <script src="./cookie.js"></script>
    <script>
        var json = [
        {
       "id": 1,
       "src": "http://img13.360buyimg.com/n1/s350x449_jfs/t1/109772/8/16113/126855/5eb133a2E55a5ed55/49f02e1d357af8f7.jpg!cc_350x449.jpg",
       "price": 1099, "name": "小米8青春版 镜面渐变AI双摄 6GB+64GB 深空灰 全网通4G"
     },
     {
       "id": 2,
       "src": "https://img11.360buyimg.com/n7/jfs/t2278/69/129833021/96430/df8863b1/55f0e861Nf585867f.jpg",
       "price": 3599.00,
       "name": "Apple iPhone 6s Plus (A1699) 128G 银色 移动联通电信4G手机"
     },
     {
       "id": 3,
       "src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg",
       "price": 3059.00,
       "name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"
     },
     {
       "id": 4,
       "src": "http://img14.360buyimg.com/n1/s350x449_jfs/t1/126208/3/1122/143313/5eb99ad4Efe3ed0e7/86381baebbae3576.jpg!cc_350x449.jpg",
       "price": 1099.00,
       "name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"
     }, {
       "id": 5,
       "src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg",
       "price": 3059.00,
       "name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"
     }, {
       "id": 6,
       "src": "https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg",
       "price": 1099.00,
       "name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"
     }
       , {
       "id": 7,
       "src": "https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg",
       "price": 3059.00,
       "name": "华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"
     }, {
       "id": 8,
       "src": "https://img13.360buyimg.com/n5/jfs/t1/132542/35/3544/159084/5efd95e8E45ac2dc8/cd4f818ecb63fff7.jpg",
       "price": 1099.00,
       "name": "荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"
     }
        ];

创建class类面向过程解决它

1.首先要将json数组渲染到页面上。设置showshop（）函数

1-1创建一个空字符串好后面遍历数组的时候将值赋给它

1-2：在construct拿到div ，将html其赋给innerHTML上这样数据就渲染到div上了

1-3.在construct调用这个函数只要new了一个对象就会自动执行construct里面的代码

  class Cart{
    constructor(){
      this.cont = document.getElementById('cont')
      this.Showshop();
    }
    Showshop(){
      let html = ''
      json.forEach(item=>{
        let {id,src,price,name} = item ;
        html += `<div class="box"><img src="${src}" alt=""><p>${name}</p>
          <span class="goods_item_price" data-price-id="100004222715" style="color: rgb(221, 69, 69); margin: 0px 5px;">¥${price}</span>
          <a href="#none" id="InitCartUrl" class="btn-special1 btn-lg" onclick="Cart.addCart(${id},1)">加入购物车</a></div>`
      });
      this.cont.innerHTML = html;
    }
    static addCart(gid,num){
      let goods = cookie.getCookie('cart');
      if(goods){
        goods = JSON.parse(goods)
        for(let key in goods){
          if(key==gid){
            num+=goods[gid]
          }
        }
       goods[gid] = num;
       cookie.setCookie('cart',JSON.stringify(goods))
      }else{
        let obj = {[gid]:num}
        obj =JSON.stringify(obj)
        cookie.setCookie('cart',obj)
      }
    }
  }
  new Cart;

2.当点击加入购物车时执行函数所以在加入购物车<a>标签上绑定点击事件

href="#none" 取消a标签自带的默认跳转因为是class类调用它所以应为属于类的函数

用static修饰

3.addcart（）传入两个参数 id 和其默认num=1

3-1 先拿到cookie的商品数据判断它是否为空

3-2 如果为空则先添加进cookie 让id为它的属性 num为它的值

3-3 转化为字符串保存到cookie中这些都要调用cookie.js 里封装的方法传参直接使用

3-4 有了商品数据要判断是哪个再给对应商品id 数量加所以遍历判断

3-5 cookie里拿的是字符串先转化为数组 for in 遍历它 key值为goods的属性

3-6 所以如果传入的 id 与 key值相等 good【gid】为商品数量给它加数量则可

3-7 做完这些更新浏览器cookie数据再将其转化为字符串存入cookie中即可

效果如两图所显示。

原文链接：https://blog.csdn.net/qq_45812595/article/details/121844781

需求 ：当点击加入购物车按钮时 获取商品在cookie中数据 如果没有 则添加 有则数量加加

需求：当点击加入购物车按钮时获取商品在cookie中数据如果没有则添加有则数量加加