当前位置: 首页 > news >正文

vue本地缓存搜索记录(最多4条)

核心代码

      //保存到搜索历史,最多存四个 item.name和item.code格式为:塞力斯000001var 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格式为:塞力斯000001var 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)},

http://www.lryc.cn/news/267813.html

相关文章:

  • Linux创建Macvlan网络
  • 从企业级负载均衡到云原生,深入解读F5
  • 什么是redis雪崩
  • [足式机器人]Part2 Dr. CAN学习笔记-Ch00 - 数学知识基础
  • Jmeter、postman、python 三大主流技术如何操作数据库?
  • IRIS、Cache系统类汉化
  • 【三维生成】稀疏重建、Image-to-3D方法(汇总)
  • Java基础知识:单元测试和调试技巧
  • [c]扫雷
  • 数据结构-十大排序算法
  • Apache RocketMQ,构建云原生统一消息引擎
  • (四) ClickHouse 中使用 `MaterializedMySQL` 引擎单独同步 MySQL 数据库中的特定表(例如 `aaa` 和 `bbb`)
  • TikTok真题第4天 | 1366. 通过投票对团队排名、1029.两地调度、562.矩阵中最长的连续1线段
  • 时序预测 | Matlab实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络时间序列预测
  • 负载均衡——Ribbon
  • 7.微服务设计原则
  • 【MATLAB库函数系列】线性调频Z(Chirp-Z,CZT)的MATLAB源码和C语言实现
  • BIT-6-指针(C语言初阶学习)
  • 傻瓜式教学Docker 使用docker compose部署 php nginx mysql
  • node express简单微服务
  • nginx-proxy-manager初次登录502 bad gateway
  • Servlet见解2
  • 【SpringCloud】-OpenFeign实战及源码解析、与Ribbon结合
  • 走进数字金融峰会,为金融科技数字化赋能
  • docker-compose部署kafka
  • Spark与Hadoop的关系和区别
  • 蓝桥杯-Excel地址[Java]
  • OSPF多区域配置-新版(12)
  • 华为---USG6000V防火墙web基本配置示例
  • Ksher H5页面支付实例指导 (PHP实现)