使用vue3完成搜索记录保存前3项操作

思路：将要搜索的文字添加到ref定义的数组中，初始时需要在本缓存中获取，当缓存中没有数据的时候为空数组，随后我们将每一个搜索记录都是用unshift添加进去当我们添加数据的个数超过想要的条数时使用pop进行删除，完成之后添加到本地缓存中

<template>
  <input type="" v-model="searchName" />
  <button @click="search">Search</button>
  <div>搜索记录</div>
  <div v-for="(item, index) in searchArr" :key="index">
    {{ item }}
  </div>
</template>

<script>
import { ref } from "vue";

export default {
    setup() {
    // 搜索的名字
        let searchName = ref("");
    // 保存到数组中 如果有本地存储，则获取本地存储的数组，如果没有，则赋值为空数组
    let searchArr = ref(localStorage.getItem("searchArr")? JSON.parse(localStorage.getItem("searchArr")):[]);
    //开始搜索
    function search() {
      if (searchName.value) {
        if (searchArr.value.length > 2) {
          searchArr.value.pop();
        }
        searchArr.value.unshift(searchName.value);
        searchArr.value = [...new Set(searchArr.value)];
        localStorage.setItem("searchArr", JSON.stringify(searchArr.value));
      }
    }
    return {
      searchArr,
      searchName,
      search,
    };
  },
};
</script>

<style></style>