vue本地缓存搜索记录（最多4条）

核心代码

      //保存到搜索历史，最多存四个 item.name和item.code格式为：塞力斯000001
      var history = uni.getStorageSync('history') || [];
      console.log("history==", history)
      var index = history.findIndex((items) => {
        return item.name == items.name && item.code == items.code;
      });
      if (index != -1) {
        history.splice(index, 1);
      }
      history.unshift({
        name: item.name,
        code: item.code,
        foxxcode: item.foxxcode,
      });
      uni.setStorageSync('history', history.slice(0, 4));

全部代码

<template>
  <view class="u-list-item" :class="'line-'+themeColor.name">

    <view @click="gotoDetail(item)" style="display: flex;flex-direction: row;width: 90%;">
      <text :class="'text-'+themeColor.name" class="list-item-name">{{ item.name }}</text>
      <text class="list-item-sx">{{ item.code }}</text>
      <text class="list-item-sx">{{ item.sx }}</text>
    </view>

    <view style="flex-direction: column;float: right;align-items: center;" v-show="!this.isCollection">
      <image @click="collection(item.code)" class="icon-right-child" :src="'/static/add.png'"/>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      group_id: "",
      isLogin: false,
      isCollection: false,
      codes: [],
    };
  },

  created() {
    this.group_id = this.$groudId();
    this.isLogin = this.$isLogin();
    this.codes = this.$focusCodes();
    if (this.codes.indexOf(this.item.code) > 0) {
      this.isCollection = true;
    }

  },
  props: {
    item: Object,
    iconsize: {
      type: String,
      default: '36'
    },
    fontweight: {
      type: String,
      default: 'blod'
    },
    fontsize: {
      type: String,
      default: '30'
    }
  },

  methods: {
    gotoDetail(item) {
      uni.navigateTo({
        url: "../main/stock-detail?code=" + item.code + "&foxxcode=" + item.foxxcode
      })
      //保存到搜索历史，最多存四个 item.name和item.code格式为：塞力斯000001
      var history = uni.getStorageSync('history') || [];
      console.log("history==", history)
      var index = history.findIndex((items) => {
        return item.name == items.name && item.code == items.code;
      });
      if (index != -1) {
        history.splice(index, 1);
      }
      history.unshift({
        name: item.name,
        code: item.code,
        foxxcode: item.foxxcode,
      });
      uni.setStorageSync('history', history.slice(0, 4));

    },
    collection(code) {
      if (!this.isLogin) {
        this.$toast("请先登录");
        return;
      }
      if (this.group_id != "") {
        var _this = this;
        this.request({
          urlInfo: this.$REQUEST.INSERT_STOCK,
          body: {
            group_id: this.group_id,
            codes: code,
          },
          success(res) {
            _this.isCollection = true;
            console.log("insert_stocks-success==", res)
          },
          fail: (res) => {
            console.log("insert_stocks-fail==", res)
          }
        })
      }
    },

  }
};
</script>

<style lang="scss">
.u-list-item {
  height: 100rpx;
  align-items: center;
  display: flex;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.list-item-name {
  margin-left: 20rpx;
  font-weight: bold;
}

.list-item-sx {
  margin-left: 20rpx;
  padding-top: 6rpx;
  color: #7F7F7F;
}

.icon-right-child {
  width: 45rpx;
  height: 45rpx;
  margin-top: 10rpx;
}
</style>

点击清除历史

   clearhistory() {
      uni.removeStorageSync('history');
      this.historyList = [];
    },

使用

  onShow() {
    this.historyList = uni.getStorageSync('history') || [];
    console.log("historyList==", this.historyList)
  },