用 localStorage 處理購物車的資料

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

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

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

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

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

反應：