vue 历史搜索记录读取新增删除

1 案例说明

实现搜索历史展示、搜索内容跳转、搜索历史清空，限制搜索历史展示数目，历史记录存储于本地 localStorage。

2 案例演示

search.gif

2 源码

本项目 github 源码：https://github.com/trp1119/vue-small-case

<template>
  <div id="app">
    <div class="search-area">
      <div class="search">
        <input v-model="input" type="text" placeholder="请输入搜索内容">
      <button @click="handleSearchResult(input)">搜索</button>
      </div>
      <div class="content">
        <span>搜索历史</span>
        <span class="cancel" @click="clearHistory">清空</span>
      </div>
      <div class="history">
        <span class="norecord" v-if="historyList.length == 0">暂时搜索记录</span>
        <span
          class="record"
          v-else
          v-for="(historyItem, index) in historyList"
          :key="index"
          @click="handleSearchResult(historyItem)"
        >
          {{historyItem}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      input: '',
      historyList: []
    }
  },
  mounted () {
    if (localStorage.getItem('localHistory') !== null) {
      this.historyList = localStorage.getItem('localHistory').split('|')
    }
  },
  methods: {
    /**
     * 执行搜索
     */
    handleSearchResult (val) {
      if (val === '') {
        alert('请输入搜索内容！')
        return
      }
      this.setlocalHistory(val) // 将搜索值加入本地localStorage
      this.historyList = localStorage.getItem('localHistory').split('|') // 从本地localStorage取出搜索历史并展示
      this.input = '' // 清空输入框
      // alert(`跳转至 ${val} 搜索结果页`) // 跳转至搜索结果页
    },
    /**
     * 加入历史搜索记录
     */
    setlocalHistory (val) {
      val = val.trim()
      let localHistory = localStorage.getItem('localHistory')
      if (localHistory === null) {
        localStorage.setItem('localHistory', val) // 若未设置过则直接设置本地存储
      }else {
        let localHistoryArray = localHistory.split('|').filter(item => item != val) // 删除搜索历史中与本次输出重复项
        if (localHistoryArray.length > 0) {
          localHistory = val + '|' + localHistoryArray.join('|') // 新增记录
        }
        if (localHistory.split('|').length > 10) { // 最大历史搜索记录10条
          localHistoryArray = localHistory.split('|')
          localHistoryArray.pop() // 删除最旧一项
          localHistory = localHistoryArray.join('|')
        }
        localStorage.setItem('localHistory', localHistory) // 存入本地
      }
    },
    /**
     * 清空历史搜索记录
     */
    clearHistory () {
      localStorage.removeItem('localHistory') // 清空搜索历史
      this.historyList = []
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
.search-area {
  width: 230px;
  height: 120px;
  border: 1px solid #ccc;
  padding: 20px;
}
.content {
  width: 225px;
  font-size: 12px;
  margin-top: 10px;
}
.content .cancel {
  float: right;
  color: #1F8CEB;
  cursor: pointer;
}
.search button {
  margin-left: 10px;
}
.history {
  margin-top: 10px;
}
.history .norecord {
  font-size: 12px;
  color: #aaa;
  margin-left: 80px;
}
.history .record {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  background-color: #f6f6f6;
  font-size: 12px;
  color: #333;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
}
</style>

3 使用API

3.1 localStorage API

3.1.1 setItem 保存数据

localStorage.setItem("key", "value");

3.1.2 getItem 读取数据

let localHistory = localStorage.getItem("key");

3.1.3 removeItem 删除数据：

localStorage.removeItem("key");

3.2 String API

3.2.1 String.prototype.split()

split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组。

let str = "衣服|鞋子|裤子"
let arr = str.split("|")
console.log(arr) // ["衣服","鞋子","裤子"]

3.3 Array API

3.3.1 Array.prototype.filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

filter 不会改变原数组，它返回通过 filter() 内 callback 过滤后的新数组。如果没有任何数组元素通过测试，则返回空数组。

// 参数 index 为当前处理项，index 为当前处理项的索引， arr 为当前处理数组
let str = "裤子"
let array = ["衣服","鞋子","裤子"]
let newArr = array.filter((item, index, arr) => {
    item !== str // 返回数组中 >3 的值组成的新数组
})
console.log(newArr) // ["衣服","鞋子"]

3.3.2 Array.prototype.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

返回值为一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串。

如果一个元素为 undefined 或 null，它会被转换为空字符串。

let array = ["衣服","鞋子","裤子"]
let str = array.join('|') // 使用 | 分隔数组中的每个元素，若缺省则用“,”分隔，若是空字符串''则没有分隔符
console.log(str) // "衣服|鞋子|裤子"

3.3.3 Array.prototype.pop()

pop()方法从数组中删除最后一个元素，并返回所删除元素的值，并改变原数组。当数组为空时返回 undefined 。

let array = ["衣服","鞋子","裤子"]
let str = array.pop()
console.log(str) // 裤子
console.log(array) // ["衣服","鞋子"]