如何用Vue 寫一個收藏功能? (localStorage) | Vue localStorage 使用
如何用Vue寫一個收藏功能?(localStorage)-HackMD---title:如何用Vue寫一個收藏功能?(localStorage)tags:前端沒有盡頭的牆外調查,六角date:20220331image:---#如何用Vue寫一個收藏功能?(localStorage)>這個部分是課程裡有教學的內容,但我覺得它很重要,所以在此記錄下來XD[color=green]這裡我們會用localStorage來將資料存進記憶體來達成收藏功能~首先,我們可以在data中先定義要存進localStorage的資料####注意這裡存入兩筆資料,分別為整筆資料與ID,整筆資料作為傳入收藏頁面用,而ID作為樣式切換用。```htmlembedded=
--- title: 如何用Vue 寫一個收藏功能? (localStorage) tags: 前端沒有盡頭的牆外調查, 六角 date: 20220331 image: --- # 如何用Vue 寫一個收藏功能?(localStorage) > 這個部分是課程裡有教學的內容,但我覺得它很重要,所以在此記錄下來XD [color=green] 這裡我們會用localStorage來將資料存進記憶體來達成收藏功能~ 首先,我們可以在data中先定義要存進localStorage的資料 #### 注意 這裡存入兩筆資料,分別為整筆資料與ID,整筆資料作為傳入收藏頁面用,而ID作為樣式切換用。 ```htmlembedded= <div @click="toggleFavorite(product)"> <div :class="favoriteId.includes(product.id) ? btn-primaryDark : btn-outline-primary"> <i class="fa-solid fa-bookmark me-3"></i><span>{{favoriteId.includes(product.id) ? 取消:加入}}收藏</span> </div> </div> ``` 這裡要記住,一定要有預設資料(也就是一個空陣列),不然會跳錯喔 > 關於為什麼要用JSON.stringify和JSON.parse轉換資料的原因在於 : [color=green] 如果我們希望儲存的資料不限於「字串」格式,可以透過 JSON.stringify() 將要儲存的資料轉換為 JSON 格式的字串;要取出資料時,再透過 JSON.parse() 方法, 將資料轉換回原本的格式。 ```jsx= data () { return { favorite: JSON.parse(localStorage.getItem(f...