手機淘寶是現代人購物的首選，而購物車功能是每個購物網站必備的功能。在HTML5中，我們可以通過使用localStorage來實現購物車的存儲和讀取操作。

// 定義一個Cart類，用于管理購物車
class Cart {
// 獲取購物車中的商品列表
static getItems () {
return JSON.parse(localStorage.getItem('cart')) || []
}
// 添加商品到購物車中
static addItem (item) {
let items = Cart.getItems()
// 判斷購物車中是否已經存在該商品
let index = items.findIndex((ele) =>{
return ele.id === item.id
})
if (index === -1) {
// 購物車中不存在該商品，添加商品信息
items.push(item)
} else {
// 購物車中已經存在該商品，更新商品數量
items[index].count += item.count
}
localStorage.setItem('cart', JSON.stringify(items))
}
// 從購物車中刪除商品
static removeItem (id) {
let items = Cart.getItems()
// 查找購物車中是否存在該商品
let index = items.findIndex((ele) =>{
return ele.id === id
})
if (index !== -1) {
// 購物車中存在該商品，刪除商品信息
items.splice(index, 1)
}
localStorage.setItem('cart', JSON.stringify(items))
}
// 獲取購物車中商品的總數量
static getCount () {
let count = 0
let items = Cart.getItems()
for (let i = 0; i< items.length; i++) {
count += items[i].count
}
return count
}
}
// 在界面上獲取購物車商品數量，并顯示在購物車圖標上
function updateCartCount () {
let count = Cart.getCount()
document.querySelector('.cart-count').innerText = count
}
// 添加商品到購物車
function addToCart (id, name, price, count) {
let item = {
id: id,
name: name,
price: price,
count: count
}
Cart.addItem(item)
updateCartCount()
}
// 從購物車中刪除商品
function removeFromCart (id) {
Cart.removeItem(id)
updateCartCount()
}

以上代碼中，我們定義了一個Cart類來管理購物車的相關操作，包括獲取商品列表、添加商品、刪除商品等功能。在界面上，我們通過調用Cart類中的方法來更新購物車商品的數量。此外，在添加商品時，我們需要傳入商品的ID、名稱、價格和數量等信息，在刪除商品時，只需要傳入商品的ID即可。