用 localStorage 處理購物車的資料

我們一般要把購物車在頁面間傳遞都會使用 session 的方式,也是可以把資料存到資料庫後在讀取別頁的時候把資料再撈出來,在 html5 有了 localStorage,要處理其實有另一個選擇而且可能更方便。

首先準備一個購物車的陣列 cart,當 localStorage.getItem("cart") 有值的時候就把值塞到陣列內,然後把陣列給 parse 成 html。

而要加購物車的時候再把每次新增的品項跟其他資料加到 cart 內,由於 localStorage 只能存字串,所以必須要把物件字串化後再存,然後重刷一次購物車,資料也可以隨意的帶到其他頁面。

只是注意需要在清空購物車或是結帳後把 cart 給清空,這樣就完成了,完整的 code 如下:

See the Pen shopping cart by deathhell (@deathhell) on CodePen.

留言