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)
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Goby 漏洞发布| QNAP NAS authLogin.cgi 命令执行漏洞(CVE-2017-6361)

漏洞名称&#xff1a;QNAP NAS authLogin.cgi 命令执行漏洞&#xff08;CVE-2017-6361&#xff09; English Name&#xff1a;QNAP NAS authLogin.cgi command execution vulnerability (CVE-2017-6361) CVSS core: 9.8 影响资产数&#xff1a; 2637547 漏洞描述&#xff1…

分享72个Python爬虫源码总有一个是你想要的

分享72个Python爬虫源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1v2P4l5R6KT2Ul-oe2SF8cw?pwd6666 提取码&#xff1a;6666 项目名称 10 photo websites…

如何在Docker环境下安装火狐浏览器并结合内网穿透工具实现公网访问

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

【C++入门(一)】:详解C++语言的发展及其重要性

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; C入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f324;️什么是C&#x1f324;️C的发展史&#x1f324;️C的重要性☁️语言的广泛度☁️C的领域⭐…

机器学习之K-means聚类

概念 K-means是一种常用的机器学习算法,用于聚类分析。聚类是一种无监督学习方法,它试图将数据集中的样本划分为具有相似特征的组(簇)。K-means算法的目标是将数据集划分为K个簇,其中每个样本属于与其最近的簇中心。 以下是K-means算法的基本步骤: 选择簇的数量(K值)…

GPT系列概述

OPENAI做的东西 Openai老窝在爱荷华州&#xff0c;微软投资的数据中心 万物皆可GPT下咱们要失业了&#xff1f; 但是世界不仅仅是GPT GPT其实也只是冰山一角&#xff0c;2022年每4天就有一个大型模型问世 GPT历史时刻 GPT-1 带回到2018年的NLP 所有下游任务都需要微调&#x…

【高性能篇】QPS概念、RT概念

什么是QPS&#xff0c;什么是RT&#xff1f; ✔️典型解析✔️扩展知识仓✔️RT ✔️QPS✔️ QPS和TPS✔️并发用户数✔️最佳线程数 ✔️典型解析 QPS&#xff0c;指的是系统每秒能处理的请求数(Query Per Second)&#xff0c;在Web应用中我们更关注的是Web应用每秒能处理的re…

RestClient操作索引库_删除索引库(三)

ES官方提供了各种不同语言的客户端&#xff0c;用来操作ES。这些客户端的本质就是组装DSL语句&#xff0c; 通过http请求发送给ES。 官方文档地址: https://www.elastic.co/quide/en/elasticsearch/client/index.html 目录 一、RestClient操作索引库&#xff08;删除及判断&am…

Javaweb小案例-基于SpringBoot+Vue实现的Timo商城

前言 Timo商城是基于Springbootvue的web商城系统&#xff0c;包含了商城的后台管理系统手机端微信小程序端 底层采用web-flash作为底层基础框架搭建 基本功能包含一下模块基础模块 部门管理用户管理角色管理菜单管理权限分配参数管理数据字典管理定时任务管理操作日志登录日志…

leetcode贪心算法题总结(二)

本节目录 1.最长回文串2.增减字符串匹配3.分发饼干4.最优除法5.跳跃游戏II6.跳跃游戏7.加油站8.单调递增的数字9.坏了的计算器 1.最长回文串 最长回文串 class Solution { public:int longestPalindrome(string s) {//计数一&#xff1a;用数组模拟哈希表int hash[127] {0}…

借贷协议 Tonka Finance:铭文资产流动性的新破局者

“Tonka Finance 是铭文赛道中首个借贷协议&#xff0c;它正在为铭文资产赋予捕获流动性的能力&#xff0c;并为其构建全新的金融场景。” 在 2023 年的 1 月&#xff0c;比特币 Ordinals 协议被推出后&#xff0c;包括 BRC20&#xff0c;Ordinals 等在内的系列铭文资产在包括比…

ArkUI按钮组件深入学习:通过点击按钮实现图片大小调整效果

文章目录 前言Button组件控制 Button 样式实现点击按钮改变图片大小文章总结技术回顾前言 在前面几节课中,我们已经学习了 ArkUI 提供的一些常见组件,通过一个小案例实现了 image text 和 text input 组件的使用。我们成功地让用户通过输入来改变图片的宽度,从而实现了一个…

OpenHarmony之系统调用

背景 对于运行L0系统的硬件一般是mcu&#xff0c;资源有限&#xff0c;L0系统没有区分内核态和用户态&#xff0c;所有的代码都在内核态运行&#xff0c;所以不需要系统调用 L2系统用的是Linux内核&#xff0c;所以系统调用跟Linux Kernel的是一样的。 所以我们主要来看看L1系…

自然语言处理(第16课 机器翻译4、5/5)

一、学习目标 1.学习各种粒度的系统融合方法 2.学习两类译文评估标准 3.学习语音翻译和文本翻译的不同 4.学习语音翻译实现方法 二、系统融合 以一个最简单的例子来说明系统融合&#xff0c;就是相当于用多个翻译引擎得到不同的翻译结果&#xff0c;然后选择其中最好的作为…

网页设计期末 建筑博物馆首页 HTML+CSS+js 完整代码(轮播图+瀑布流)

文章目录 前言&#xff1a;完整代码在总结处跳转&#xff01;&#xff01;&#xff01; 描述&#xff1a;结果展示&#xff1a;部分代码演示&#xff1a;&#xff08;完整代码在总结处跳转&#xff09;总结&#xff1a;&#xff08;完整代码在此处跳转&#xff09; 前言&#x…

Spring高手之路-@Autowired和@Resource注解异同点

目录 相同点 不同点 1.来源不同。 2.包含的属性不同 3.匹配方式&#xff08;装配顺序&#xff09;不同。 ​编辑 4.支持的注入对象类型不同 5.应用地方不同 相同点 都可以实现依赖注入&#xff0c;通过注解将需要的Bean自动注入到目标类中。都可以用于注入任意类型的Bean…

Unity3D 安装和下载指南及汉化

Unity3D是一款强大的游戏开发引擎&#xff0c;为开发者提供了丰富的工具和资源&#xff0c;使得游戏制作变得更加简单和高效。本文将介绍Unity3D的安装和下载步骤&#xff0c;以帮助初学者迅速入门。 步骤一&#xff1a;访问Unity官网 首先&#xff0c;打开浏览器&#xff0c…

小型企业网设计-课设实验-爆款实验

可以按照我的配置依次配置&#xff0c;成品打包文件&#xff0c;请&#xff1a;Ensp888 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]un in en Info: Information center is disabled. [Huawei]# [Huawei]sysname SW5 [SW5]# [SW5]vlan batch…

限流,熔断,降级分析

写在前面 本文一起看下限流&#xff0c;熔断&#xff0c;降级的概念。 1:限流 限制单位时间内的请求数&#xff0c;超过的则拒绝或其他。常用的算法有滑动时间窗口&#xff0c;漏桶算法&#xff0c;令牌桶算法。 2:熔断 在分布式的场景中&#xff0c;一个请求可能涉及到多…