h5新增存储localstorge

最新推荐文章于 2024-04-19 09:49:09 发布

黄酱！

最新推荐文章于 2024-04-19 09:49:09 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/122831157

JS 专栏收录该内容

91 篇文章

订阅专栏

本文详细探讨了HTML5中LocalStorange的特性，包括其存储机制、使用方法以及在前端开发中的实际应用案例。通过学习，读者将能够掌握如何利用LocalStorage进行持久化的数据存储，提升网页应用的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

localStorage.setItem('username', '张三')
        localStorage.setItem('password', 123)

        console.log(localStorage.getItem('username'))

        localStorage.removeItem('username')

        console.log(localStorage.getItem('username'))

加入购物车

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e5e5e5;
        }

        ul {
            width: 1200px;
            min-height: 300px;
            margin: 20px auto;
        }

        ul li {
            list-style: none;
            width: 236px;
            height: 304px;
            background-color: #fff;
            float: left;
            margin: 20px;
        }

        ul li .pic {
            height: 180px;
            position: relative;
        }

        ul li .pic img {
            width: 160px;
            height: 160px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        ul li p {
            font-size: 14px;
            text-align: center;
            line-height: 26px;
        }

        ul li p.price {
            color: #ff6700;
        }

        ul li button {
            display: block;
            margin: 10px auto;
        }

        .count {
            width: 100px;
            height: 120px;
            background-color: orange;
            position: absolute;
            right: 0;
            top: 300px;
            font-size: 14px;
            text-align: center;
            line-height: 100px;
        }

        .count span {
            color: red;
            font-weight: bold;
            margin: 2px;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <li>
            <div class="pic">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=200&h=200&f=webp&q=90">
            </div>
            <p class="title">Note 10 Pro</p>
            <p class="des">天玑1100年度旗舰芯，VC液冷散热</p>
            <p class="price">1699元起</p>
            <button>加入购物车</button>
        </li> -->
    </ul>
    <a href="12-购物车页面.html">
        <div class="count">
            商品共<span>0</span>件
        </div>
    </a>
    <script src="js/product_list.js"></script>
    <script>
        //获取元素
        let container = document.querySelector('ul')
        let span = document.querySelector('span')
        //获取到数据
        let data = product_list
        //数据渲染
        function render(){
            data.forEach((item)=>{
                container.innerHTML += `
                     <li>
                        <div class="pic">
                            <img src="${item.url}">
                        </div>
                        <p class="title">${item.title}</p>
                        <p class="des">${item.des}</p>
                        <p class="price">${item.price}</p>
                        <button data-id=${item.id}>加入购物车</button>
                    </li>
                `
            })
        }
        render()
        //加入购物车逻辑
        function cart(){
            //做事件委派
            container.addEventListener('click', (e)=>{
                e = e || window.event
                let target = e.target || e.srcElement
                //判断是否点击的是按钮
                if(target.nodeName == 'BUTTON'){
                    //获取到每一个按钮的id
                    let id = target.dataset.id - 0
                    //当咱们点击对应的按钮的时候，获取到相应那条数据
                    let goods = data.find((item)=>{return item.id == id})
                    //先获取下购物车里面有没有数据，如果没有数据让它返回一个空数组
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    //判断里面有没有数据
                    if(!list.length){
                        //没有数据，如果能进到这个地方说明就是没有数据的
                        //没有数据，应该先把数据添加进数组，并让商品数量赋值为1
                        list.push(goods)
                        goods.cart_num = 1
                    }else{
                        //如果有数据，先判断下数组里面有没有这条数据，防止重复存在
                        let res = list.some((item)=>{return item.id == id})
                        //如果数据相同，应该找到相同的数据让其商品数量自增+1
                        if(res){
                            let index = list.findIndex((item)=>{return item.id == id})
                            list[index].cart_num++
                        }else{
                            //没有相同的，就把数据添加进数组
                            list.push(goods)
                            goods.cart_num = 1
                        }
                    }
                    //把对应的数据应该存储进购物车里面
                    localStorage.setItem('cart', JSON.stringify(list))
                    //当咱们点击按钮的时候，让商品数量进行变化
                    count()
                } 
            }, false)
        }
        cart()
        //商量数量计算
        function count(){
            //先从购物车里面把数据提取出来
            let list = JSON.parse(localStorage.getItem('cart')) || []
            let num = 0
            //遍历进行数量增加
            list.forEach((item)=>{
                num += item.cart_num
            })
            //给span标记进行赋值操作
            span.innerHTML = num
        }
        count()

<body>
    <h1>购物车页面</h1>
    <script>
        let data = JSON.parse(localStorage.getItem('cart'))
        console.log(data)
    </script>
</body>