vue-music 关于搜索历史本地存储

Posted 2020-11-17 catbrother

搜索历史 搜索过的关键词 保存在本地存储 localstorage 中，同时多个组件共享搜索历史数据，将数据存到vuex 中，初始值从本地缓存中取得对应key 的值，没有数据默认为空数组

点击搜索关键词列表值的时候触发将关键词写入vuex 中，搜索结果列表suggest 组件向外派发事件，在需要渲染搜索历史列表的组件接受派发的事件提交actions 保存结果

封装actions 方法saveSearchHistory 提交commit 将

创建cache.js 在提交之前把关键词存放到本地存储中，cache.js 实现所有跟本地存储相关的逻辑。因为原生的localstorage api 需要将数组转换为字符串存储，相对麻烦，所以用good-storage 插件直接存数组

缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面

将插入数组判断的逻辑封装成insetArray 方法

function insertArray(arr, val, compare, maxLen) {        // 当前数组，插入的值，比较是否有重复项函数，存储最大值
  const index = arr.findIndex(compare)　　　　// 获取比较不同定义的查找函数，获取数组中对应的索引值
  if (index === 0) {　　　　//如果是第一条数据则退出，原样返回数组
    return
  }
  if (index > 0) {　　　　// 如果有数据，不是在第一位，则删除该重复数据
    arr.splice(index, 1)
  }
  arr.unshift(val)　　　　// 将新值插入到第一位
  if (maxLen && arr.length > maxLen) {　　　　　　//判断数组长度超出定义的长度，把数组的最后一位移除
    arr.pop()
  }
}

使用存储到本地缓存中。并返回一个已经筛选完的数组，可以用于存到vuex中

export function saveSearch(query) {
  let searches = storage.get(SEARCH_KEY, [])
  insertArray(searches, query, (item) => {
    return item === query        // 比较获取的数组中有没有新值
  }, SEARCH_MAX_LEN)        // 存储最大值
  storage.set(SEARCH_KEY, searches)    //存入本地存储
  return searches
}

在actions 中调用

import {saveSearch} from ‘common/js/cache‘

export const saveSearchHistory = function({commit},query){
  commit(types.SET_SEARCH_HISTORY,saveSearch(query));
} 

删除一条搜索历史数据，点击删除，派发一个delete 事件，search 组件监听到事件提交一个action 从vuex 和缓存 中删除该条数据

删除逻辑和保存差不多，判断是否在缓存数组中有要删除的数据索引，如果有则删除，并更新缓存和vuex 数据

function deleteFromArray(arr, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    arr.splice(index, 1)
  }
}

export function deleteSearch(query) {
  let searches = storage.get(SEARCH_KEY, [])
  deleteFromArray(searches, (item) => {
    return item === query
  })
  storage.set(SEARCH_KEY, searches)
  return searches
}

actions

export const deleteSearchHistory = function({commit},query){
  commit(types.SET_SEARCH_HISTORY,deleteSearch(query));
} 

删除监听

<span class="icon" @click.stop="deleteOne(item)">

<search-list :searches="searchHistory" @select="addQuery" @delete="deleteSearchHistory"></search-list>
// 监听派发事件直接指向actions 中定义的方法

点击清空所有搜索历史数据直接将缓存数组设置为空即可

export function clearSearch() {
  storage.remove(SEARCH_KEY)
  return []
}

最近播放列表 也需要存储在本地和vuex 中，在state.js 中设置playHistory:loadPlay() ，从缓存中获取初始值。当歌曲ready 播放的时候，写入数据actions 提交savePlayHistory，传入当前歌曲信息currentSong

插入存储套路个 搜索历史一样，比较函数 条件为song.id === item.id  比较当前歌曲的id  有没有相同的歌曲

export function savePlay(song) {
  let songs = storage.get(PLAY_KEY, [])
  insertArray(songs, song, (item) => {
    return song.id === item.id
  }, PLAY_MAX_LEN)
  storage.set(PLAY_KEY, songs)
  return songs
}

点击最近播放列表，插入当前播放列表中，并且如果点击的最近播放列表不在第一位，则替换到第一位

selectSong(song, index) {
  if (index !== 0) {
    this.insertSong(new Song(song))
    this.$refs.topTip.show()
  }
},

添加收藏和删除收藏 歌曲的套路也一样

从界面角度操作点击收藏样式和功能 通过设置计算属性 根据判断当前歌曲是否在vuex 中存储，如果有的话则删除，没有的话则收藏。不同组件中有相同的收藏功能和逻辑的话，可以写在mixin 中共享调用

getFavoriteIcon(song){
    if(this.isFavorite(song)){
        return ‘icon-favorite‘
    }
    return ‘icon-not-favorite‘
},
toggleFavorite(song){
    if(this.isFavorite(song)){
        this.deleteFavoriteList(song)
    }else{
        this.saveFavoriteList(song);
    }
},
isFavorite(song){
    const index = this.favoriteList.findIndex((item)=>{
        return item.id == song.id
    })
    return index > -1
},