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

Posted catbrother

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
},

 

以上是关于vue-music 关于搜索历史本地存储的主要内容,如果未能解决你的问题,请参考以下文章

vue-music 关于Search(搜索页面)-- 搜索结果优化

vue-music 关于Search(搜索页面)--上拉加载

vue-music 关于Search(搜索页面)--上拉加载

模拟百度搜索框,输入时显示历史记录

vue-music 关于基础组件 (Tab组件)

vue-music 关于Player (播放器组件)--播放模式