歌手页面收藏功能之本地存储localstorage之save

发布时间 2023-09-20 20:37:44作者: Ly021
收藏功能:
一、本地存储代码,array-storage.js:
import storage from 'good-storage'
 
function insertArray(arr, val, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    // index>-1说明val在arr中存在
    return
  }
  arr.unshift(val)
  // 插入到数组的前面
}

export function save(item, key, compare) {
  const items = storage.get(key, [])
  // 这行代码的作用是尝试从存储中获取与给定 key 相关的数据。如果成功获取数据,它将存储在 items 变量中;如果无法获取数据,或者 key 不存在,那么将使用默认值,即一个空数组。最终,items 变量中将包含从存储中获取的数据或空数组。
  insertArray(items, item, compare)
  // items、item 和 compare。它的作用是向数组 items 中插入一个新的元素 item,并使用比较函数 compare 来确定插入的位置。
  // 在内部定义compare函数,但compare函数的内部细节由外部去定义即可,
  return items
}
二、在constant.js定义key并导出:
export const FAVORITE_KEY = '__favorite__'
三、将钩子函数实现收藏功能相关逻辑封装到use-favorite.js中:
主要代码:
function toggleFavorite(song) {
    let list
    if (!isFavorite(song)) {
      // remove
    } else {
      list = save(song, FAVORITE_KEY)
    }
    song.commit('setFavoriteList', list, compare)
    function compare(item) {
      return item.id === song.id
    }
  }