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
              }
            })
          }
    
    }
  • 相关阅读:
    Win8 消费者预览版中文版下载地址 官方原版
    Easyui datagrid加载本地Json数据
    myeclipse 8.510.0 安装 svn 方法
    easyui tree使用方法
    安装Oracle 11g r2先决条件检查失败解决方法
    Win8/Win7或XP 双系统安装图文教程
    Oracle存储过程与函数
    MyEclipse 中 使用 TortoiseSVN(1)
    MyEclipse 中 使用 TortoiseSVN(2)
    easyui使用Ajax提交表单,返回Json数据
  • 原文地址:https://www.cnblogs.com/yanl55555/p/12543990.html
Copyright © 2011-2022 走看看