zoukankan      html  css  js  c++  java
  • vue搜索历史记录缓存实现

    思路:

    1.浏览器缓存永久保存搜索历史数据.

    2.页面初始化将数据保存到页面变量中.

    3.对搜索历史记录的怎加和删除,要同步到缓存中.

    ----------------直接看代码----------------

    *前端使用的是vue,这里只是代码片段*

    1.页面的 div

    <!---历史搜索begin---->
        <div style="margin-top: 46px">
          <div v-if="this.showFlag === true" class="search-history">
            <div class="tip-words">
              <div style="float: left;">
                <h4>搜索历史</h4>
              </div>
              <div style="float: right;" @click="clearHistoryItems">
                <img src="../../img/img/delete-1.png" width="16px"/>
              </div>
            </div>
            <p style="margin-bottom: 10px">&nbsp;</p>
            <div  v-for="(item,index) in searchHistoryList" :key="index" @click="searchByHistoryKeyWord(item)" class="history-keywords">
              &nbsp;&nbsp;{{item}}&nbsp;&nbsp;
            </div>
          </div>
        </div>
        <!---历史搜索end---->

    2. vue data

    data() {
          return {
            // 搜索历史
            searchHistoryList: [],
            // 标记显示搜索历史
            showFlag: false,
            loadShow: false
          }
        },

    3.vue 搜索历史的一些方法

    methods: {
          showHistory() {
            if (this.searchHistoryList.length > 0) {
              this.showFlag = true
            }
          },
          // 清空历史记录
          clearHistoryItems() {
            localStorage.removeItem('historyItems')
            this.searchHistoryList = []
            this.showFlag = false
          },
          // 过滤一个结果的空记录添加,过滤空搜索
          appendKeywords(value) {
            /**
             * 1.已经有的关键词不再添加
             * 2.添加到数组的首位,若超出10个则删除最后一个
             * 3.添加到缓存
             */
            var appendFlag = true
            if (this.searchHistoryList !== null && this.searchHistoryList !== undefined && this.searchHistoryList.length > 0) {
              this.searchHistoryList.forEach(function(currentValue, index) {
                if (currentValue === value) {
                  appendFlag = false
                  return
                }
              })
              // 判断-添加
              if (appendFlag === true) {
                // 长度判断
                if (this.searchHistoryList.length >= 10) {
                  this.searchHistoryList.unshift(value)
                  this.searchHistoryList.pop()
                } else {
                  this.searchHistoryList.unshift(value)
                }
                localStorage.setItem('historyItems', JSON.stringify(this.searchHistoryList))
              }
            } else {
              this.searchHistoryList = []
              this.searchHistoryList.push(value)
              localStorage.setItem('historyItems', JSON.stringify(this.searchHistoryList))
            }
          },
          searchByHistoryKeyWord(item) {
            this.loadTip = ''
            this.queryData.inputInfo = item
            // 查询
            fetchGetDataByKeyWord(item).then(response => {
              // 查询赋值
              this.dataList = response.data.body.data
              if (this.dataList.length === 0) {
                this.loadTip = '没有符合条件数据'
                this.showHistory()
              } else {
                this.loadTip = ''
                this.showFlag = false
              }
            })
          }
    
    }
  • 相关阅读:
    Excel-单条件和多条件匹配搜索
    Excel-条件判断
    Excel-常用快捷键
    EXCEL-批量下拉填充
    Excel-数据分列的多种方法实现
    Excel-统一小括号格式(中文小括号,英文小括号)
    在WEB网页上模拟人的操作(批量操作)
    EXCEL-常用函数总结
    C语言学习——bsmap-2.74_main.cpp
    Linux --- awk
  • 原文地址:https://www.cnblogs.com/yanl55555/p/12543990.html
Copyright © 2011-2022 走看看