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

搜索历史搜索过的关键词保存在本地存储 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
},