构建 - localStorage 删除数据的逻辑

Author: lbwa

src/base/base-search-list.vue

@@ -8,7 +8,7 @@
  @click="selectItem(item)"
  >
  <span class="text">{{ item }}</span>
- <div class="icon" @click.stop="deleteItem">
+ <div class="icon" @click.stop="deleteItem(item)">
  <i class="icon-close"></i>
  </div>
  </li>

src/common/js/cache.js

@@ -4,15 +4,10 @@
 
 import localStorage from 'store/dist/store.modern'
 
-// import localforage from 'localforage'
-// 指定 localforage 库的存储驱动，该处为 localStorage，待选 WebSQL 和 IndexedDB
-
-// localforage.setDriver(localforage.LOCALSTORAGE)
-
 const SEARCH_KEY = '__search__'
 const SEARCH_MAX_LENGTH = 15
 
-function insertArray (arr, value, compare, maxLength) {
+function insertItem (arr, value, compare, maxLength) {
  const index = arr.findIndex(compare)
 
  if (index === 0) { // 若是第一个数据
@@ -30,28 +25,20 @@ function insertArray (arr, value, compare, maxLength) {
  }
 }
 
-// localforage 异步存储 search data
-
-// export async function saveSearch (query) {
-// let searches = []
-
-// await localforage.getItem(SEARCH_KEY).then(value => {
-// searches = value || []
-// })
-
-// insertArray(searches, query, item => {
-// return item === query
-// }, SEARCH_MAX_LENGTH)
+function deleteItem (arr, compare) {
+ const index = arr.findIndex(compare)
 
-// await localforage.setItem(SEARCH_KEY, searches)
+ if (index >= 0) {
+ arr.splice(index, 1)
+ }
+}
 
-// return searches
-// }
+// export function
 
-export function saveSearch (query) {
+export function saveSearchItem (query) {
  let searches = localStorage.get(SEARCH_KEY) || []
 
- insertArray(searches, query, item => {
+ insertItem(searches, query, item => {
  return item === query
  }, SEARCH_MAX_LENGTH)
 
@@ -62,3 +49,45 @@ export function saveSearch (query) {
 export function loadSearchData () {
  return localStorage.get(SEARCH_KEY) || []
 }
+
+export function deleteSearchItem (query) {
+ let searches = localStorage.get(SEARCH_KEY)
+
+ deleteItem(searches, item => {
+ return item === query
+ })
+
+ localStorage.set(SEARCH_KEY, searches)
+
+ return searches
+}
+
+export function deleteAllSearchItem () {
+ localStorage.remove(SEARCH_KEY)
+ return []
+}
+
+/**
+ * 1. localforage 异步存储 search data
+ * 2. localforage 库可指定存储驱动，默认优先级为 IndexedDB、WebSQL、localStorage
+ */
+
+// import localforage from 'localforage'
+
+// localforage.setDriver(localforage.LOCALSTORAGE)
+
+// export async function saveSearch (query) {
+// let searches = []
+
+// await localforage.getItem(SEARCH_KEY).then(value => {
+// searches = value || []
+// })
+
+// insertItem(searches, query, item => {
+// return item === query
+// }, SEARCH_MAX_LENGTH)
+
+// await localforage.setItem(SEARCH_KEY, searches)
+
+// return searches
+// }

src/components/the-search/search.vue

@@ -15,7 +15,7 @@
  class="hot-key-item"
  v-for="(key, index) of hotKey"
  :key="index"
- @click="selectHotKey(key.k)"
+ @click="selectQueryRecord(key.k)"
  >
  <span>{{ key.k }}</span>
  </li>
@@ -25,18 +25,22 @@
  <div class="search-history" v-show="searchHistory.length">
  <h1 class="title">
  <span class="text">搜索历史</span>
- <span class="clear-btn">
+ <span class="clear-btn" @click.stop="clearAllHistory">
  <i class="icon-clear"></i>
  </span>
  </h1>
- <BaseSearchList :searchData="searchHistory" @selectItem="selectItem"/>
+ <BaseSearchList
+ :searchData="searchHistory"
+ @selectItem="selectQueryRecord"
+ @deleteItem="deleteSearchHistory"
+ />
  </div>
  </div>
  </div>
 
  <PartsResult
  @listScrolling="blurInputBox"
- @selectQuery="saveSearchData"
+ @selectQuery="saveSearchItem"
  :query="queryKey"
  v-show="queryKey"
  />
@@ -68,11 +72,7 @@ export default {
  },
 
  methods: {
- selectItem (item) {
- this.$refs.searchBox.setQuery(item)
- },
-
- saveSearchData () {
+ saveSearchItem () {
  this.saveSearchHistory(this.queryKey)
  },
 
@@ -84,7 +84,7 @@ export default {
  this.queryKey = query
  },
 
- selectHotKey (item) {
+ selectQueryRecord (item) {
  /**
  * 调用子组件方法传值的优势在于:
  * 1. 不用设置不必要的 props 和 watch
@@ -104,7 +104,9 @@ export default {
  },
 
  ...mapActions([
- 'saveSearchHistory'
+ 'saveSearchHistory',
+ 'deleteSearchHistory', // 自动传入载荷
+ 'clearAllHistory'
  ])
  },
 

src/store/actions.js

@@ -3,7 +3,7 @@
 import * as types from './mutation-types'
 import { playMode } from 'common/js/config'
 import { shuffle } from 'common/js/util'
-import { saveSearch } from 'common/js/cache'
+import { saveSearchItem, deleteSearchItem, deleteAllSearchItem } from 'common/js/cache'
 
 function findIndex (list, song) {
  return list.findIndex(item => {
@@ -98,5 +98,13 @@ export const insertSong = ({ commit, state }, song) => {
 }
 
 export const saveSearchHistory = function ({ commit }, query) {
- commit(types.SET_SEARCH_HISTORY, saveSearch(query))
+ commit(types.SET_SEARCH_HISTORY, saveSearchItem(query))
+}
+
+export const deleteSearchHistory = function ({ commit }, query) {
+ commit(types.SET_SEARCH_HISTORY, deleteSearchItem(query))
+}
+
+export const clearAllHistory = function ({ commit }) {
+ commit(types.SET_SEARCH_HISTORY, deleteAllSearchItem())
 }