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 數據

 

cache.js

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
},

<i class="icon" @click="toggleFavorite(currentSong)" :class="getFavoriteIcon(currentSong)"></i>