js利用localStorage存储和获取数据

最新推荐文章于 2024-06-14 11:01:38 发布

- 瑾♛年

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量964

点赞数 18

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_52840130/article/details/135226468

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" href="../code/css/bootstrap.min.css">
       <style>
           #btn{
           margin: 20px;
           }
           .card{
           margin: 20px;
           padding: 10px;
           float: left;
           height: 430px;
           }
           .card img{
           height: 230px;
           }
           .card h5{
           font-weight: normal;
           font-size: 16px;
           }
           .card .card-text{
           color: red;
           }
           .hide{
           /* 英文换行 */
           word-break: break-all;
           /* 溢出隐藏 */
           overflow: hidden;
           /* 弹性盒兼容写法 */
           display: -webkit-box;
           /* 出现几行省略号 */
           -webkit-line-clamp: 1;
           /* 行与行之间是垂直排列的 */
           -webkit-box-orient: vertical;
           }
           .side{
               width: 100px;
               height: 100px;
               position: fixed;
               top: 50%;
               right: 0;
               background-color: aquamarine;
               line-height: 100px;
               text-align: center;
           }
           .side span{
               color: red;
           }
       </style>
   </head>
   <body>
       <h1>购物车渲染及localStorage使用</h1>
       <hr/>
       <div class="concent"></div>
       <div class="side">
           商品<span>0</span>件
       </div>
       <script src='../code/js/axios.min.js'></script>
       <script>
           class List{
               constructor(){
                   this.concent=document.querySelector('.concent')
                   this.span=document.querySelector('.side span')
                   this.init()
               }
               init(){
                   this.request()
               }
               async request(){
                   // axios.get('http://localhost:2305/shopping/list')
                   // .then(res=>{
                   //    console.log(res)
                   //    this.render(res.data)
                   // })
                   const {data}=await axios.get('http://localhost:2305/shopping/list')
                   console.log(data)
                   this.render(data)
               }
               render(data){
                   data.forEach(item=>{
                       this.concent.innerHTML += `
                                   <div class="card" style="width: 18rem;">
                                   <img src="${item.url}" class="card-img-top" alt="...">
                                   <div class="card-body">
                                   <h5 class="card-title hide">${item.title}</h5>
                                       <p class="hide">${item.des}</p>
                                   <p class="card-text">${item.price}元</p>
                                   <a href="JavaScript:;" class="btn btn-primary" data-id="${item.id}">加入购物车</a>
                                   </div>
                                   </div>
                       `
                       })
                       this.add(data)
               }
               add(data){

                   this.concent.οnclick=(e)=>{
                       var target=e.target
                       if(target.nodeName=='A'){
                           let id = target.dataset.id-0
                           let goods=data.find(item=>item.id==id)
                               console.log(goods)
                           var list=JSON.parse(localStorage.getItem('cart'))||[]
                           if(list.length==0){
                               goods.cart_num=1
                               list.push(goods)
                           }else{
                               let res=list.some(item=>item.id==id)
                               if(res){
                                   console.log(res)
                                   let index=list.findIndex(item=>item.id==id)
                                   list[index].cart_num++
                                   console.log(list[index].cart_num)

                               }else{
                                   goods.cart_num=1
                                   list.push(goods)

                               }
                           }
                           localStorage.setItem('cart',JSON.stringify(list))
                       }
                       this.total()
                   }

               }
               total(){
                   var num=0
                   var list=JSON.parse(localStorage.getItem('cart'))||[]
                   list.forEach(item=>{
                       num+=item.cart_num
                   })
                   this.span.innerHTML=num
               }
           }
           new List()
       </script>
   </body>
</html>