JS中利用本地数据库实现模拟购物车的功能

1.实现购物车功能我们首先要对页面进行编写

首先写出购物车的表头部分即可，其余部分使其动态生成，代码如下

<table border="solid ">
        <thead>
            <tr class="">
                <td width="80px" class="checked">
                    <input type="checkbox" name="" id="check"> 全选
                </td>
                <td width="100px">
                    预览图
                </td>
                <td width="300px">
                    商品名称
                </td>
                <td width="100px">
                    单价
                </td>
                <td width="250px">
                    数量
                </td>
                <td width="100px">
                    小计
                </td>
                <td width="100px">
                    操作
                </td>
                </tr>
        </thead>
        <tbody>

        </tbody>
        </tr>
    </table>

对表格进行样式修改，代码如下

         table {
            border-collapse: collapse;
            text-align: center;
        }

        input {
            text-align: center;
        }

最终效果为：

 

2.要使页面跟随数据库变化，我们首先要给本地数据库中设置数据

给本地数据库设置数据的方法如下:

localStorage.setItem("cart", JSON.stringify(cart) );

其中第一个参数“cart”是存到数据库中的键名，第二个参数是真实的数据，是一个由对象组成的数组

var cart = [{
            "pic": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207141003_62d2359ef53fa667d4f6137fd4eb7f6b.png?thumb=1&w=80&h=80&f=webp&q=90",
            "name": "日常元素巨能洗洗衣凝珠 240g/袋",
            "price": "23元",
            "id": 1,
            "num": 1,
        },
        {
            "pic": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211918_4b54731d4125730d0d2c1bd6882cf66c.png?thumb=1&w=80&h=80&f=webp&q=90",
            "name": "米家Tritan水杯 白色",
            "price": "59元",
            "id": 2,
            "num": 1,
        },
        {
            "pic": "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205240036_9a8fbf274c0d419c5a0a49ef67cdd7c8.png?thumb=1&w=80&h=80&f=webp&q=90",
            "name": "小米手环7 夜跃黑 白色",
            "price": "239元",
            "id": 3,
            "num": 1,
        }
    ];

因为在setItem（）这个方法中，我们不能直接存储对象，要把对象转为字符串，所以调用JSON.stringify（obj）方法，把cart对象转为字符串存入数据库中；

相对的从数据库取出数据的方法是

JSON.parse(localStorage.getItem("cart"));

因为在getItem（）这个方法中，我们取出的是字符串，所以调用JSON.parse（str）方法，把数据库中取出来的字符串转为cart对象使用.

因为使用时经常要调用这两个方法，所以可以对二者进行封装，代码如下：

    //把数据存到本地数据库中的方法
var setData = (key,value)=>{
    return localStorage.setItem(key,JSON.stringify( value));
}

//把数据从本地数据库中取出的方法
var getData = (key)=>{
    return JSON.parse(localStorage.getItem(key)) ;
}

以后设置和取出可以直接使用setData（）和getData（），后文为了方便大家理解，不使用封装好的方法

3.现在我们就要开始封装渲染页面的方法了

        原理很简单

        1.首先获取数据库中的数据，方法上文有提过

        2.创建一个空的字符串str

        3.遍历获取到的数组，每次循环使str+=页面中要设置的内容，如下代码

        4.最后把str赋值给tbody

        5.最后把实现功能的方法进行封装，命名为render()

// 2.编写渲染函数并封装
    var oTable = document.querySelector("tbody");
    var render = () => {
        var cart = JSON.parse(localStorage.getItem("cart"));
        var str = ``;
        //根据获取到数据的长度渲染页面
        for (let i = 0; i < cart.length; i++) {
            //tbody中显示的内容
            str += `
        <tr class="">
        <td  width = "80px">
            <input type="checkbox" name="" id="check" class = "son-checked" > 
        </td>
        <td width = "100px">
            <img src = "${cart[i].pic}">
            
        </td>
        <td width = "300px">
            ${cart[i].name}
        </td>
        <td width = "100px">
            ${cart[i].price}
        </td>
        <td width = "250px">
            <button class="numdown" data-id = "${cart[i].id}">-</button>
            <input type="text" name="" id="" value="${cart[i].num}">
            <button class = "numadd" data-id="${cart[i].id}">+</button>
        </td>
        <td width = "100px">
            ${ parseInt( cart[i].price) * cart[i].num +"元"}   
        </td>
        <td width = "100px">
            <button class = "delete" data-id="${cart[i].id}">删除</button>
        </td>
    </tr>
            `
        }
        oTable.innerHTML = str;
    }

调用render（）；根据数据库渲染页面

渲染后的页面长这样：

 把数据库中的数据渲染到页面中了

4.接下来就是实现页面的功能了

首先使实现点击+，-使物品的数量发生变化

我们利用事件委托来完成，目的是提高系统的相应速度

1.直接个表格添加点击事件（我们在3中已经获取了表格对象）

2.e.target表示点击的元素，我们利用if语句判断是否点击的是正确的按钮，所以给-，+，删除按钮加上类名

3.代码实现：

oTable.onclick = (e) => {
        var targetEle = e.target;
        //点击+
        if (targetEle.className == "numadd") {
            // 点击+后修改数据库
            var cart = JSON.parse(localStorage.getItem("cart"));
            var goods = [...cart].find((item) => {
                return item.id == targetEle.dataset.id; //找到点击的元素是哪个
            });
            if (goods.num < 10) {
                goods.num++;
                localStorage.setItem("cart", JSON.stringify(cart));
                targetEle.previousElementSibling.value = goods.num;
                //在改变小计的值
                targetEle.parentNode.nextElementSibling.innerText = goods.num * parseInt(goods.price);
            } else {
                alert("物品最大数量不能大于10");
            }
            // renden();

        }

        //点击-
        if (targetEle.className == "numdown") {
            //获取数据库中的数据
            var cart = JSON.parse(localStorage.getItem("cart"));
            var goods = [...cart].find((item) => {
                return item.id == targetEle.getAttribute("data-id");
                /*确定点击的是哪一个元素，方法和选项卡相同
                  先给目标元素绑定一个与数组索引相同的属性（自定义属性，任意属性即可）
                */
            });
            if (goods.num > 1) {
                goods.num--;
                localStorage.setItem("cart", JSON.stringify(cart));
                targetEle.nextElementSibling.value = goods.num;
                //改变小计的值
                targetEle.parentNode.nextElementSibling.innerText = parseInt(goods.price) * goods.num;
            } else {
                alert("物品最小数量不能小于1");
            }
            // render();

        }

        //删除
        if (targetEle.className == "delete") {
            //获取数据库中的数据
            var cart = JSON.parse(localStorage.getItem("cart"));
            var goods = [...cart].filter((item) => {
                return item.id != targetEle.dataset.id; //过滤出点击元素以外的元素
            });
            //再把过滤出来的数组加入购物车
            localStorage.setItem("cart", JSON.stringify(goods));
        }
        render();

    }