此篇文章的代码实现了没有数据库的情况下如何保存数据在本机,在有数据的情况下关闭浏览器,再次打开数据依然存在,第一次打开时会报错,因为无法从本机浏览器找到数据,下面我们展示代码
<body> <div id="app"> <div> <form action=""> 商品名称 :<input type="text" v-model="productName" name="productName"> 商品单价 :<input type="text" v-model="productPrice" name="productPrice"> <input type="button" @click="addProduct" value="添加商品"> </form> </div> <ul> <li v-for="(pro,index) in productList" :key="index"> 商品名称:{{pro.productName}} --------- 商品单价:{{pro.productPrice}} <button type="button" @click="addProtoCart(index)">添加购物车</button> <button type="button" @click="deleteProToCart(index)">删除此商品</button> </li> </ul> <cart :cartlist="cartList"></cart> </div> <template id="cartHtml"> <div> <table border="1"> <tr> <td><input type="checkbox" id="quanxuan" @click="quanxua"></td> <td>商品名称</td> <td>商品单价</td> <td>商品数量</td> <td>价格</td> </tr> <tr v-for="(pro,index) in cartlist" :key="index"> <td><input type="checkbox" v-model="pro.active" @change="xuan"></td> <td>{{pro.productName}}</td> <td>{{pro.productPrice}}</td> <td> <button @click="redProNum(index)">-</button> {{pro.puoductNum}} <button @click="addProNum(index)">+</button> </td> <td>{{pro.productPrice * pro.puoductNum}}</td> </tr> <tr> <td colspan="3">选中的数量:{{activeNum}}/{{cartlist.length}}</td> <td colspan="2">总价格:{{totalPrice}}</td> </tr> </table> </div> </template> </body> <script src="../js/vue2.7.js"></script> <script> var cart={ template:"#cartHtml", props:['cartlist'], methods:{ addProNum(index){ let product=this.cartlist[index] product.puoductNum++ localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartlist)); }, redProNum(index){ let product=this.cartlist[index] //判断商品数量是否为一 if (product.puoductNum==1) { this.cartlist.splice(index,1)//为1,从数组中删除 localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartlist)); }else{ product.puoductNum-- localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartlist)); } }, quanxua(){ if(document.getElementById("quanxuan").checked){ for(var i=0;i<this.cartlist.length;i++){ this.cartlist[i].active=true; } localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartlist)); console.log(localStorage.getItem("cartList")); }else{ for(var i=0;i<this.cartlist.length;i++){ this.cartlist[i].active=false; } localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartlist)); } }, xuan(){ localStorage.removeItem("cartList");//删除浏览器的本地存储 localStorage.setItem('cartList', JSON.stringify(this.cartlist));//添加到浏览器的本地存储 } }, computed:{ //选中了几个商品 activeNum(){ let num=0; let activeProductList=this.cartlist.filter(item=>{ return item.active }) return activeProductList.length; }, //计算总价 totalPrice(){ let result=0 for (pro of this.cartlist) { if (pro.active) { result=result+pro.productPrice*pro.puoductNum } } return result }, }, //修改的时候进行判断复选框是否全选 updated() { var isActive=this.cartlist.every(c => c.active) if (isActive) { document.getElementById("quanxuan").checked=true } else { document.getElementById("quanxuan").checked=false } }, } var app1=new Vue({ el:"#app", data(){ return{ productName:"", productPrice:"", productList:[ ], cartList:[ ] } }, methods:{ //添加商品 addProduct(){ let isnameOk=true; let ispriceOk=true;; //对新增的商品名称和单价进行验证 if (this.productName==null||this.productName=="") { isnameOk=false } if(isNaN(this.productPrice) || this.productPrice<=0){ ispriceOk=false; } if (isnameOk&&ispriceOk) { //查找新增的商品是否存在一商品列表中,如果不存在返回-1 let findindex=this.productList.findIndex(item=>{ return item.productName==this.productName }) if (findindex==-1) {//判断商品列表是否存在新增的商品 //把新商品添加导商品列表中 this.productList.push({productName:this.productName,productPrice:this.productPrice}) localStorage.removeItem("productList");//删除本地浏览器存储 localStorage.setItem('productList', JSON.stringify(this.productList));//储存到本地浏览器 }else{ alert("此商品已经存在商品列表中")//商品已存在,给出提示 } }else{ alert("请输入合适的商品名称及单价") } }, //添加商品到购物车,index是点击商品的下标 addProtoCart(index){ let newproduct=this.productList[index]//根据下标从商品列表中取出商品对象 //从购物车列表中查找,是否存在新的商品,如果找到返回购物车中的商品 let product =this.cartList.find(item=>{ return item.productName==newproduct.productName }) if (product) { //如果有对应的商品则数量加一 product.puoductNum++ }else{ //没有对应的商品就添加商品到购物车 this.cartList.push({ productName:newproduct.productName ,productPrice:newproduct.productPrice ,puoductNum:1 ,active:true }) localStorage.removeItem("cartList"); localStorage.setItem('cartList', JSON.stringify(this.cartList)); } }, //删除商品 deleteProToCart(index){ alert("删除商品") this.productList.splice(index,1) localStorage.removeItem("productList"); localStorage.setItem('productList', JSON.stringify(this.productList)); } }, //打开浏览器加载保存的数据 mounted(){ for(pro of JSON.parse(localStorage.getItem("productList"))){ this.productList.push({productName:pro.productName,productPrice:pro.productPrice}); } for(pro of JSON.parse(localStorage.getItem("cartList"))){ this.cartList.push({productName:pro.productName,productPrice:pro.productPrice,puoductNum:pro.puoductNum,active:pro.active}); } }, //组件 components:{ cart }, }) </script>
