JavaScript小测验5
利用json，localstorage将信息存储在本地，通过查看购物车按钮查看总数和价格
我的答案
<!DOCTYPE html>
<html>
<head>
<title>測驗</title>
<style>
button{
font-size:25px;
margin-right:10px;
}
p{
font-size: 25px;
display: inline-block;
margin-right:10px;
}
img{
height: 200px;
display: block;
margin-top:50px;
}
</style>
</head>
<body>
<button onclick="
result.product1=0;
result.product2=0;
result.total=0;
result.productNum=0;
let result1 = JSON.stringify(result);
localStorage.setItem('data',result1);
">清空購物車</button>
<button onclick="
const result2 = localStorage.getItem('data');
let result3 =JSON.parse(result2);
console.log(result3);
">显示購物車</button>
<img src="product_images/product_image1.jpg">
<p>$100</p>
<button onclick="
showtotal('product1',100);
result.product1++;
">加入購物車</button>
<img src="product_images/product_image2.jpg">
<p>$200</p>
<button onclick="
//调用方法price直接这样调用即可 result.shownum 如果result.shownum.price的话是错误的
showtotal('product2',200);
result.product2++;
">加入購物車</button>
<script>
let cart1=localStorage.getItem("data");
let result = JSON.parse(cart1);
if(result===null){
result ={
productNum:0,
//对象属性的值可以为对象，调用的办法result.product1.num;
product1:{
num:0,
name:"海底捞",
price:100
},
product2:{
num:0,
name:"露露",
price:200
},
total:0,
//创建方法（给对象属性的值为函数，我们叫他方法）
shownum: function resultlog (product){
console.log(`${product}商品总数`);
},
};
}
function showtotal(product,price){
result.total+=price;
result.productNum+=1;
console.log(`产品总数量${result.productNum}`);
console.log(`产品总数量${result.total}`);
let result1 = JSON.stringify(result);
localStorage.setItem("data",result1);
}
</script>
</body>
</html>
标准答案
<!DOCTYPE html>
<html>
<head>
<title>測驗</title>
<style>
button{
font-size:25px;
margin-right:10px;
}
p{
font-size: 25px;
display: inline-block;
margin-right:10px;
}
img{
height: 200px;
display: block;
margin-top:50px;
}
</style>
</head>
<body>
<button onclick="
showCart();
">購物車總額</button>
<button onclick="
cart.productNum = 0;
cart.prodcut1.num = 0;
cart.prodcut2.num = 0;
cart.totalPrice = 0;
console.log('已清空購物車');
localStorage.removeItem('cart');
showCart();
">清空購物車</button>
<img src="product_images/product_image1.jpg">
<p>$100</p>
<button onclick="
cart.productNum++;
cart.prodcut1.num++;
cart.totalPrice += 100;
saveCart();
showCart();
">加入購物車</button>
<img src="product_images/product_image2.jpg">
<p>$200</p>
<button onclick="
cart.productNum++;
cart.prodcut2.num++;
cart.totalPrice += 200;
saveCart();
showCart();
">加入購物車</button>
<script>
let cart = JSON.parse(localStorage.getItem("cart"));
if (cart===null) {
cart = {
productNum: 0,
prodcut1: {
num: 0,
name: "海底撈泡麵",
price: 100
},
prodcut2: {
num: 0,
name: "養氣人蔘",
price: 200
},
totalPrice: 0
};
}
function showCart() {
console.log(`目前商品數 : ${cart.productNum}`);
console.log(`${cart.prodcut1.name} : ${cart.prodcut1.num}`);
console.log(`${cart.prodcut2.name} : ${cart.prodcut2.num}`);
console.log(`目前購物車總額 : ${cart.totalPrice}`);
}
function saveCart() {
const jsonCart = JSON.stringify(cart);
localStorage.setItem("cart", jsonCart);
}
</script>
</body>
</html>
