<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script src="./jquery-3.1.1.min.js"></script>
</head>
<table width="200" border="1">
<tr>
<th scope="col">name</th>
<th scope="col">num</th>
<th scope="col">add</th>
</tr>
<tr>
<td class="name">A</td>
<td class="num">1</td>
<td><input type="button" onClick="add(this)" value="加入"></td>
</tr>
<tr>
<td class="name">B</td>
<td class="num">1</td>
<td><input type="button" onClick="add(this)" value="加入"></td>
</tr>
</table>
<div id="car">
</div>
<body>
<script>
var str="";
function add(obj){
var a = $(obj).parent().parent("tr").find(".num").html();
var b = $(obj).parent().parent("tr").find(".name").html();
var html = "<p>"+b+"============================="+a+"<button onclick='del(this)'>删除</button></p>";
$("#car").append(html);
//arr.push(html);
var c = $("#car").html();
localStorage.setItem("car",c);
console.log(b);
}
function del(obj){
//localStorage.removeItem("car");
//return false;
$(obj).parent().remove();
$(obj).remove();
var c = $("#car").html();
localStorage.setItem("car",c);
}
function list(){
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
$("#car").append(value);
}
}
list();
</script>
</body>
</html>