JavaScript利用localStorage模拟一个购物车

JavaScript利用localStorage模拟一个购物车

• 存储localStorage.setItem()
  语法:localStorage.setItem(key, value)
  注意: 只能存储字符串
  如果你存储的是一个复杂数据类型, 会自动给你执行一下toString()
  当你向存储复杂数据类型的时候, 最好是转换成json 格式在存储
  存储的内容是永久保存的, 不能设置过期时间
  除非手动删除
• 获取 localStorage.getItem()
  语法:localStorage.getItem(你要获取的key)
  你存储的是什么你拿出来就是什么
  存储复杂数据类型的时候, 转换成json 格式存储了
  你获取出来的就是json 格式的字符串
  注意: 如果获取一个没有的数据, 那么拿到的就是null
• 删除localStorage.removeItem()
  语法:localStorage.removeItem(你要删除的 key)
  直接删除了
• 清除localStorage.clear()
  语法:localStorage.clear()
  把 localStorage 里面的数据全部清除

 <ul class="list">


    </ul>

    <h2>购物车列表</h2>
    <ul class="car">

    </ul>

    <script>
        let list = document.querySelector('.list')
        let car = document.querySelector('.car')

        //商品列表 arr
        let arr = [
            {
                id: 1,
                pname: "xiaomi",
                pprice: 3000
            },
            {
                id: 2,
                pname: "huawei",
                pprice: 5000
            },
            {
                id: 3,
                pname: "iphone11",
                pprice: 7000
            }
        ]

        // 商品列表显示
        let html = ''
        arr.forEach(v => {
            html += `<li>
            <h2>${v.pname}</h2>
            <p>${v.pprice}</p>
            <button>添加购物车</button>
        </li>`
        })

        list.innerHTML = html
        let but = list.querySelectorAll('button')

        // 更改本地数据localstorage就是 更改 arrCar数组中的值

        // 判断本地数据是否有内容  确定 arrCar 数组中的内容
        let carJson = localStorage.getItem('car')
        let arrCar = null
        if (carJson) {
            arrCar = JSON.parse(carJson)
        } else {
            arrCar = []
        }

        // 点击 添加商品 按钮后  本地数据变化
        for (let i = 0; i < arr.length; i++) {
            but[i].onclick = function () {
                let id = arr[i].id
                let objCar = { ...arr[i] }

                // 判断 数组arrCar中 有无该商品  
                // 若没有在数组arrCar中添加 
                //并添加num数量属性 属性值为 1
                // 若有  则让该商品num数量属性值加1 num++
                let jsondel = arrCar.find(v => v.id == id)

                if (jsondel) {
                    jsondel.num++
                } else {
                    objCar.num = 1
                    arrCar.push(objCar)
                }


    localStorage.setItem('car', JSON.stringify(arrCar))
      localCar()
            }
        }


        localCar()

        // 点击 添加商品 后 购物车

        function localCar() {
            // 显示 购物车 中内容
            let html = ''
            arrCar.forEach(v => {
                html += `<li>
            <h2>${v.pname}</h2>
            <p>${v.pprice}</p>
            <p class='p'>${v.num}</p>
            <p class='price'>总价：${v.num * v.pprice}</p>
            <button class='but1'>-</button>
            <button class='but2'>+</button>
            <button class='but3'>删除</button>
        </li>`
            })
            car.innerHTML = html
            let del = car.querySelectorAll('.but1')
            let dele = car.querySelectorAll('.but2')
            let cle = car.querySelectorAll('.but3')
            let p = car.querySelectorAll('.p')

            // 减 1 按钮   
            for (let i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    arrCar[i].num--

                    if (arrCar[i].num == 0) {
                        arrCar.splice(i, 1)
                    } else {
                        p[i].innerHTML = arrCar[i].num
                    }

localStorage.setItem('car', JSON.stringify(arrCar))

                    location.reload()
                }
            }

            // 加 1 按钮
            for (let i = 0; i < dele.length; i++) {
                dele[i].onclick = function () {
                    arrCar[i].num++
                    p[i].innerHTML = arrCar[i].num

localStorage.setItem('car', JSON.stringify(arrCar))

                    location.reload()
                }
            }

            // 删除 按钮
            for (let i = 0; i < cle.length; i++) {
                cle[i].onclick = function () {
                    arrCar.splice(i, 1)

localStorage.setItem('car', JSON.stringify(arrCar))

                    location.reload()
                }
            }
        }




    </script>