localStorage 购物车案例

最新推荐文章于 2024-04-04 02:29:14 发布

蛋卷cook

最新推荐文章于 2024-04-04 02:29:14 发布

阅读量302

点赞数 1

分类专栏： html+css+js案例文章标签： javascript html5 css bootstrap 前端

本文链接：https://blog.csdn.net/Cloudyunduo/article/details/113259097

版权

html+css+js案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

localStorage 购物车案例两个页面实时渲染页面
css：bootstrap
开源：

添加商品页面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加商品页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <form action="">
            <legend>
                <h1 class="text-center">商品添加页面</h1>
            </legend>
            <div class="form-group">
                <label for=""><h3>商品名称</h3></label>
                <input type="text" id="pro_name" class="form-control" />
            </div>
            <div class="form-group">
                <label for=""><h3>商品价格</h3></label>
                <input type="number" id="pro_price" class="form-control" />
            </div>
            <div class="form-group">
                <label for=""><h3>商品数量</h3></label>
                <input type="number" id="pro_num" class="form-control" />
            </div>
            <div class="form-group">
                <label for=""><h3>商品类别</h3></label>
                <select name="" id="pro_type">
            <option value="0">---请选择商品分类---</option>
            <option value="1">---水果---</option>
            <option value="2">---熟食---</option>
            <option value="3">---小吃---</option>
            <option value="4">---饮料---</option>
        </select>
            </div>
            <div>
                <input type="button" value="添加商品" class="btn btn-primary" id="add_pro">
            </div>
        </form>
    </div>
</body>
<script>
    let $ = ele => ele[0] === '#' ? document.querySelector(ele) : document.querySelectorAll(ele)
    let c = ele => document.createElement(ele)


    $("#add_pro").onclick = function() {
        //初始化
        if (!localStorage.getItem("shop_data")) {
            localStorage.setItem("shop_data", "[]")
        }
        //收集数据
        let obj = {
                pro_id: new Date().getTime(),
                pro_name: $("#pro_name").value,
                pro_price: $("#pro_price").value,
                pro_num: $("#pro_num").value,
                pro_type: $("#pro_type").value
            }
            //取出数据，为字符串型
        let str = localStorage.getItem("shop_data")
            //将数据转换为数组对象
        let arr = JSON.parse(str)
            //将对象添加入数组
        arr.push(obj)
            //将数组转化为字符串然后在存入localstorage
        localStorage.setItem("shop_data", JSON.stringify(arr))
    }
</script>
</html>

展示商品页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示商品页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <table class="table">
            <caption>
                <h1 class="text-center">购物车展示</h1>
            </caption>
            <thead>
                <tr>
                    <th colspan="6">
                        <select name="" id="pro_type">
                    <option value="0">---全部分类---</option>
                    <option value="1">---水果---</option>
                    <option value="2">---熟食---</option>
                    <option value="3">---小吃---</option>
                    <option value="4">---饮料---</option>
                </select>
                        <input type="button" value="价格升序" class="btn btn-warning" id="price_up">
                        <input type="button" value="价格降序" class="btn btn-success" id="price_down">
                    </th>
                </tr>
                <tr>
                    <th>商品类型</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb">

            </tbody>
        </table>
    </div>
</body>
<script>
    let $ = ele => ele[0] === '#' ? document.querySelector(ele) : document.querySelectorAll(ele)
    let c = ele => document.createElement(ele)
        //定义一个处理类型的函数
    let show_type = (num) => {
            let s = ""
            switch (num) {
                case 1:
                    s = "水果"
                    break;
                case 2:
                    s = "熟食"
                    break;
                case 3:
                    s = "小吃"
                    break;
                case 4:
                    s = "饮料"
                    break;
            }
            return s
        }
        //添加一个渲染页面的函数
    let create_tr = (arr) => {
        //先清空数据
        $("#tb").innerHTML = ""
        for (let obj of arr) {
            //创建行
            let tr = c("tr")
                //创建列
            let td_pro_type = c("td")
            let td_pro_name = c("td")
            let td_pro_price = c("td")
            let td_pro_num = c("td")
            let td_total_price = c("td")
            let td_ope = c("td")
                //添加内容
            td_pro_type.innerHTML = show_type(+obj.pro_type)
            td_pro_name.innerHTML = obj.pro_name
            td_pro_price.innerHTML = obj.pro_price
            td_pro_num.innerHTML = `
            <input type="button" class="btn btn-danger btn.decrement" value="-" data-pro_id="${obj.pro_id}">
            <input type="text" value="${obj.pro_num}" readonly>
            <input type="button" class="btn btn-success btn-increment" value="+" data-pro_id="${obj.pro_id}">
            `
            td_total_price.innerHTML = obj.pro_price * obj.pro_num
                //将td添加入tr中
            tr.appendChild(td_pro_type)
            tr.appendChild(td_pro_name)
            tr.appendChild(td_pro_price)
            tr.appendChild(td_pro_num)
            tr.appendChild(td_total_price)
            tr.appendChild(td_ope)
                //将tr添加入tb中
            $("#tb").appendChild(tr)
                //删除按钮
            let del_btn = c("input")
            del_btn.type = "button"
            del_btn.value = "删除"
            del_btn.className = "btn btn-danger"
                //将删除按钮添加入td中
            td_ope.appendChild(del_btn)
                //删除按钮事件
            del_btn.onclick = function() {
                //取出数据
                let arr = JSON.parse(localStorage.getItem("shop_data"))
                    //修改数据 
                arr = arr.filter(item => item.pro_id !== obj.pro_id)
                    // 将数据放回去
                localStorage.setItem("shop_data", JSON.stringify(arr))
                    // 渲染页面
                create_tr(JSON.parse(localStorage.getItem("shop_data")))

            }
        }
    }
    create_tr(JSON.parse(localStorage.getItem("shop_data")))

    //监听事件，实时渲染页面
    window.onstorage = function() {
            create_tr(JSON.parse(localStorage.getItem("shop_data")))
        }
        //分类 给select添加事件
    $("#pro_type").oninput = function() {
            if (this.value === '0') {
                create_tr(JSON.parse(localStorage.getItem("shop_data")))
                return
            } else {
                create_tr(JSON.parse(localStorage.getItem("shop_data")).filter(item => item.pro_type === this.value))
            }
        }
        //升序
    $("#price_up").onclick = function() {
            let arr = JSON.parse(localStorage.getItem("shop_data"))
            arr.sort((n1, n2) => n1.pro_price - n2.pro_price)
            create_tr(arr)
        }
        //降序
    $("#price_down").onclick = function() {
            let arr = JSON.parse(localStorage.getItem("shop_data"))
            arr.sort((n1, n2) => n2.pro_price - n1.pro_price)
            create_tr(arr)
        }
        //加减按钮事件
    $("#tb").onclick = function(e) {
        if (e.target.value === '-') {
        //将id取出来，转换为数值型
            let id = +e.target.dataset.pro_id
            //将数据取出来
            let arr = JSON.parse(localStorage.getItem("shop_data"))
            //遍历数组
            arr.forEach(item => {
                if (+item.pro_id === id) {
                    if (item.pro_num <= 1) {
                        alert("不可以再减啦！")
                        return
                    } else
                        item.pro_num--
                }
            })
            //将数据存入localstorage
            localStorage.setItem("shop_data", JSON.stringify(arr))
                //实时更新数据
            create_tr(JSON.parse(localStorage.getItem("shop_data")))
        } else {
            let id = +e.target.dataset.pro_id
            let arr = JSON.parse(localStorage.getItem("shop_data"))
            arr.forEach(item => {
                if (+item.pro_id === id) {
                    item.pro_num++
                }
            })
            localStorage.setItem("shop_data", JSON.stringify(arr))
                //实时更新数据
            create_tr(JSON.parse(localStorage.getItem("shop_data")))
        }
    }
</script>

</html>