搜索页浏览历史实现本地存储

最新推荐文章于 2024-05-30 11:27:58 发布

qq_kary

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量298

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_kary/article/details/128284073

版权

问题：编写搜索页，将搜索历史存储在本地，并显示在页面上。
解决：1、首先使用v-model双向绑定数据，获取文本框中的内容

<el-input
      placeholder="请输入需要搜索的关键字"
      class="input-with-select"
      style="width: 30vw; margin-top: 10px"
      v-model="searchVal"
    >

2、给搜索按钮添加点击事件

  <el-button
        slot="append"
        icon="el-icon-search"
        @click="submit()"
      ></el-button>

3、根据文本框输入内容时的变化，子组件向父组件传参（$emit）调用方法，父组件接收参数，触发方法判断文本框是否有内容；如果没有内容直接return；如果有内容，则判断当前搜索内容在本地存储（localStorage）是否存在，如果不存在，在data中定义一个空数组（searchArr），将搜索内容添加（使用unshift从头部开始添加）至searchArr中；如果存在则将数据添加之后使用ES6（new Set() ）进行去重处理，返回一个对象，再使用ES6中的Array.from(需要转变的对象）进行强制数组转化，然后使用JSON.stringify（）最新的数据赋值给本地存储即可。
子组件：

 submit() {
      this.$emit("getSearchPics", this.searchVal);
      this.searchVal=''
      // console.log('搜索',this.searchVal)
    },

父组件定义子组件传过来的方法

<search-input  class="search" @getSearchPics="getSearchPhotos"></search-input>

父组件接收子组件传过来的参数：

     getSearchPhotos(searchVal) {
      //先判断搜索的内容是否为空
      if(!searchVal) return
      console.log(searchVal);
      //判断之前有没有搜索的本地存储
      if(!localStorage.getItem('searchList')){
        //没有
        localStorage.setItem('searchList',"[]")

      }else{
        //之前有
        this.searchArr=JSON.parse(localStorage.getItem('searchList'))
      }
      //增加数据,从前开始添加
      this.searchArr.unshift(searchVal)
      //ES6去重,返回对象，再转为真正的数组
      let newArr=new Set(this.searchArr)
      //给本地存储赋值,使用ES6中的Array.from(转为数组的对象)
      localStorage.setItem('searchList',JSON.stringify(Array.from(newArr)))
      }