4.6 練習
練習
建立 html5/web_storage/save_product.html 檔案，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul > li{
border: 1px solid red;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<ul>
<li data-id="a">
<div>
<h1>商品名稱1</h1>
<div>NT$99</div>
<div>
數量：
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<button type="button" class="cart">加入購物車</button>
<button type="button" class="cart_remove">移除</button>
</div>
</li>
<li data-id="b">
<div>
<h1>商品名稱2</h1>
<div>NT$199</div>
<div>
數量：
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<button type="button" class="cart">加入購物車</button>
<button type="button" class="cart_remove">移除</button>
</div>
</li>
<li data-id="c">
<div>
<h1>商品名稱3</h1>
<div>NT$299</div>
<div>
數量：
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<button type="button" class="cart">加入購物車</button>
<button type="button" class="cart_remove">移除</button>
</div>
</li>
</ul>
<button type="button" id="cart_clear">清空購物車</button>
</body>
</html>按照以下說明撰寫：
1、「清空購物車」按鈕，按下去的話，將 localStorage 裡的資料清空。
2、「加入購物車」按鈕，按下去的話，將商品 id 及數量，加進 localStorage。
3、「移除」按鈕，按下去的話，將該商品，從 localStorage 中移除。
指定 key 的名稱是 cart，存的資料格式如下：
[
{
p_id: "a",
p_num: 2
},
{
p_id: "b",
p_num: 3
}
]參考作法( https://codepen.io/carlos411/pen/vYMypvg )：
Last updated