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

news2024/11/25 22:46:39

核心代码

      //保存到搜索历史,最多存四个 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)
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1343007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过nginx配置防御web漏洞

一、常见web漏洞 二、nginx防御策略&#xff1a; 要使用Nginx配置防御Web漏洞&#xff0c;可以采取以下措施&#xff1a; 禁用不必要的HTTP方法&#xff1a;Nginx默认启用了许多HTTP方法&#xff0c;如PUT、DELETE等。可以通过在Nginx配置中禁用不必要的HTTP方法来减少潜在的安…

Vue - 使用Element UI Upload / importExcelJs进行文件导入

1 情景一 需求背景&#xff1a;后端配合&#xff0c;点击"导入"按钮&#xff0c;弹出“导入”弹窗&#xff0c;将电脑本地Excel表格数据导入到页面中表格位置&#xff08;需要调用后端接口&#xff09;&#xff0c;而页面中表格通过后端接口获取最新数据。 实现思路…

学python一定要下载python吗,学python都需要什么软件

大家好&#xff0c;本文将围绕想学python都要下载什么软件展开说明&#xff0c;初学python需要安装什么软件是一个很多人都想弄明白的事情&#xff0c;想搞清楚学python一定要下载python吗需要先了解以下几个事情。 工欲善其事必先利其器。初学者在学Python的时候&#xff0c;往…

雷军称小米汽车不可能卖 9 万 9;杭州破获重大勒索病毒案丨 RTE 开发者日报 Vol.116

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

thinkphp+vue_mysql汽车租赁管理系统1ma2x

运行环境:phpstudy/wamp/xammp等 开发语言&#xff1a;php 后端框架&#xff1a;Thinkphp5 前端框架&#xff1a;vue.js 服务器&#xff1a;apache 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat/phpmyadmin 课题主要分为三大模块&#xff1a;即管理员模块、用户模块…

优维携手深职大共建“中国高校‘双碳’技能仿真操作系统”!

优维“双碳”战略合作高校 优维科技与深圳职业技术大学碳中和技术研究院&#xff08;深职碳研院&#xff09;签署战略合作协议&#xff0c;深化产学研&#xff0c;聚力创新“双碳”发展。在“双碳”目标大背景下&#xff0c;优维科技和深职碳研院将携手共同开发中国高校“双碳…

Django(四)

1.数据库操作 MySQL数据库 pymysql import pymysql# 1.连接MySQL conn pymysql.connect(host"127.0.0.1", port3306, userroot, passwd"root123", charsetutf8, dbunicom) cursor conn.cursor(cursorpymysql.cursors.DictCursor)# 2.发送指令 cursor.…

{MySQL} 数据库约束 表的关系 新增删除 修改 查询

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数据库约束1.1约束类型&#xff1a;1.2 NULL约束1.3unique 唯一约束1.4 DEFAULT&#xff1a;默认值约束1.5 PRIMARY KEY&#xff1a;主键约束1.6 FOREIGN K…

Flowable中6种部署方式

1. addClasspathResource src/main/resources/processes/LeaveProcess.bpmn20.xml Deployment deploy repositoryService.createDeployment().name("请假审批").addClasspathResource("processes/LeaveProcess.bpmn20.xml").deploy();2. addInputStream…

QCheckBoxQRadioBoxQComboBoxQSlider

QCheckBox QCheckBox 是 Qt 框架中一个常用的控件&#xff0c;用于创建一个可以勾选或取消勾选的复选框。它通常用于表示选项的开/关状态 autoExclusive 是一个与单选按钮&#xff08;QRadioButton&#xff09;相关的属性。这个属性决定了同一个父窗口下的单选按钮是否自动形成…

利用NPS跟踪客户忠诚度:问卷调查实用指南与技巧分享

许多营销人员表示&#xff0c;净推荐值&#xff08;NPS&#xff09;是任何行业成功的主要衡量标准。同时&#xff0c;它也是衡量客户忠诚度的绝佳工具。我们可以将NPS问题引入问卷调查中&#xff0c;从而获取出真实的数据。NPS是怎么衡量顾客的&#xff1f;NPS将顾客分为推荐者…

力扣刷题记录(21)LeetCode:121、123、188、309

目录 121. 买卖股票的最佳时机 123. 买卖股票的最佳时机 III 188. 买卖股票的最佳时机 IV 309. 买卖股票的最佳时机含冷冻期 如果某一天出售股票可以得到最大利润&#xff0c;那么股票买入的价格一定是这天之前股票的最低价格。 所以我们可以在遍历股票价格的时候不断更新股…

OCP NVME SSD规范解读-4.NVMe IO命令-2

NVMe-IO-3&#xff1a; 由于设备具有掉电保护功能&#xff08;如Power Loss Protection&#xff0c;PLP&#xff09;&#xff0c;因此在以下情况下&#xff0c;性能不应降低&#xff1a; FUA&#xff08;Force Unit Access&#xff09;&#xff1a;是计算机存储设备中的一种命…

《别让猴子跳回背上》——管理者的时间管理

讲时间管理的书很多&#xff0c;但这本是专门讲给管理者的时间管理。 在职场中&#xff0c;许多管理者都会碰到工作计划执行不下去、组织目标难于实现的问题&#xff0c;搭进了自己所有可以支配的时间&#xff0c;仍旧是焦头烂额&#xff0c;顾此失彼&#xff1b;而下属则因为…

Linux 线程安全 (2)

文章目录 线程同步概念条件变量使用生产消费模型信号量的使用读写锁的使用 Linux 线程安全 &#xff08;1&#xff09; 线程同步概念 竞态条件&#xff1a;因为时序问题&#xff0c;而导致程序异常. 饥饿问题&#xff1a;只使用互相锁保证线程安全时&#xff0c;锁资源总被某…

web三层架构

目录 1.什么是三层架构 2.运用三层架构的目的 2.1规范代码 2.2解耦 2.3代码的复用和劳动成本的减少 3.各个层次的任务 3.1web层&#xff08;表现层) 3.2service 层(业务逻辑层) 3.3dao 持久层(数据访问层) 4.结合mybatis简单实例演示 1.什么是三层架构 三层架构就是把…

C#下将点云数据保存为PLY格式

目前没有找到C#下将点云数据保存为PLY格式的库&#xff0c;查看了一下PLY格式&#xff0c;所以自己写了个方法实现点云数据保存PLY格式 public static string SavePointCloudToPLY(string No, float[] x, float[] y, float[] z){ string result "";Task.Run(() >…

开发知识点-JAVA图形化-JavaFX

JavaFX JavaFX通用漏洞利用工具开发从无到无环境配置vscode配置JavaFX JavaFX基本程序结构创建项目新建一个包新建入口类&#xff08;主类&#xff09;新建&#xff08;FX&#xff09;label标签 创建按钮 JavaFX应用的 Stage窗口JavaFX应用的 Scene 场景类Node UI控件的通用属性…

Linux操作系统极速入门[常用指令]

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…

Grafana告警发送至飞书配置指定at某人或所有人

1.问题描述 通过webhook向飞书机器人发送消息&#xff0c;根据飞书机器人官方文档&#xff0c;始终无法指定某个人或者所有人通知&#xff0c;后来发现是文档参数有问题。 文档地址&#xff1a;https://open.feishu.cn/document/client-docs/bot-v3/add-custom-bot 官方文档给…