微信小程序:怎么在一个js中修改另一个js的数据(这里通过缓存进行实现)

news2024/10/6 16:29:20

实例:现有两个页面index.js和category.js,我现在想在index.js中修改category.js的数据

初始数据

category = [{
        name: '物流配送',
        list: [{
          id: 1,
          job: '外卖骑手',
          checked: true
        }, {
          id: 2,
          job: '快递员',
          checked: false
        }, {
          id: 3,
          job: '司机',
          checked: false
        }, {
          id: 4,
          job: '网约车司机',
          checked: true
        }, {
          id: 5,
          job: '货运司机',
          checked: false
        }]
      },
      {
        name: '仓储',
        list: [{
          id: 1,
          job: '分拣打包扫描',
          checked: false
        }, {
          id: 2,
          job: '叉车工',
          checked: false
        }]
      },
      {
        name: '安保',
        list: [{
          id: 1,
          job: '保安',
          checked: false
        }],
      }
  ];

修改页面代码-index.js

我现在已知的是name的值和id值,我需要修改对应name下list中对应id所对应的checked的值

引入存数据的页面category.js

import category from '../../utils/category'

 

修改数据

方法中进行数据的修改,并将数据存入缓存

select_position: function (e) {
  var id = e.currentTarget.dataset.id;//获取的id值
  var name = e.currentTarget.dataset.name;//获取的name值
  //查询所选的全部元素
  console.log(category)
  //查询category中对应的name项
  const item = category.find(item => item.name === name);
  if (item) {
    //查询对应name项下list对应的id项
    const sonitem = (item.list).find(sonitem => sonitem.id === id);
    //如果该项存在,将该项的checked值修改为与之相反的值
    if (sonitem) {
      sonitem.checked = !sonitem.checked;
    } else {
      console.log('没找到对应id值');
    }
  } else {
    console.log('没找到对应');
  }
  //延迟一秒后将数据存入缓存
  setTimeout(() => {
    wx.setStorageSync('category', JSON.stringify(category));
  }, 1000);   
},

数据页面代码category.js

判断缓存中是否有数据,如果有数据就执行缓存中的数据,如果没有就执行原始数据

//定义一个数据用于存入数据
let category = []
// 从本地缓存中读取数据
const cachedCategory = wx.getStorageSync('category');
if (cachedCategory) {
  // 如果本地缓存中有数据,则将其赋值给 category 变量
  category = JSON.parse(cachedCategory);
} else {
  // 如果本地缓存中没有数据,则使用默认的 category 数组
  category = [{
        name: '物流配送',
        list: [{
          id: 1,
          job: '外卖骑手',
          checked: true
        }, {
          id: 2,
          job: '快递员',
          checked: false
        }, {
          id: 3,
          job: '司机',
          checked: false
        }, {
          id: 4,
          job: '网约车司机',
          checked: true
        }, {
          id: 5,
          job: '货运司机',
          checked: false
        }]
      },
      {
        name: '仓储',
        list: [{
          id: 1,
          job: '分拣打包扫描',
          checked: false
        }, {
          id: 2,
          job: '叉车工',
          checked: false
        }]
      },
      {
        name: '安保',
        list: [{
          id: 1,
          job: '保安',
          checked: false
        }],
      }
  ];
}
export default category;

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

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

相关文章

Spring Cloud - 通过 Gateway webflux 编程实现网关异常处理

一、webflux 编程实现网关异常处理 我们知道在某一个服务中出现异常,可以通过 ControllerAdvice ExceptionHandler 来统一异常处理,即使是在微服务架构中,我们也可以将上述统一异常处理放入到公共的微服务中,这样哪一个微服务需要…

供应链金融融资模式

目录 应收账款融资 库存融资 预付款融资 舍得,只舍不得的人时领袖,先舍后得的人是老板,而只得不舍的人唯有乞丐。 应收账款融资 上游企业(供应商、卖方)为取得运营资金,以与买方(核心企业)签订的贸易合同产生的应收账款为基础,为卖方提供以合同项下的应收账款作为还款…

SSM项目与Redis整合以及Redis注解式开发以及Redis击穿穿透雪崩

目录 前言 一、SSM项目整合Redis 1.导入pom依赖 2.Spring-redis相关配置 3.Spring上下文配置 二、redis注解式缓存 1.Cacheable 注解 2.CachePut 注解 3.CacheEvict 注解 三、redis击穿、穿透、雪崩 1. 缓存击穿 2. 缓存穿透 3. 缓存雪崩 前言 当将SSM项目与Red…

【算法设计实验二】分治法解决棋盘覆盖问题

import java.util.*;public class Main {static int cnt0;public static void main(String[] args){Scanner scnew Scanner(System.in);System.out.println("请输入棋盘边长大小!");int nsc.nextInt();int[][] gnew int[n][n];System.out.println("请…

word图片的标题跑到了图片的上方。

问题描述:在写论文时,在word文档中插入了一个svg图片,然后在图片下方输入标题。后面可能是调整了svg图片的大小,标题跑到了图片的上方。 具体情况如下图所示。标题明显跑到了图片的上方。 解决办法:把svg图片格式调成…

RTC实时时钟——DS1302

DS1302目录 一、DS1302简介引脚定义与推荐电路 二、芯片手册1.操作寄存器的定义2.时序定义dc1302.cds1302.h 三、蓝桥杯实践 一、DS1302简介 RTC(Real Time Clock):实时时钟,是一种集成电路,通常称为时钟芯片。现在流行的串行时钟电路很多,如…

[java进阶]——方法引用改写Lambda表达式

🌈键盘敲烂,年薪30万🌈 目录 📕概念介绍: ⭐方法引用的前提条件: 1.引用静态方法 2.引用构造方法 ①类的构造: ②数组的构造: 3.引用本类或父类的成员方法 ①本类&#xff1…

深入理解ClickHouse跳数索引

一、跳数索引​ 影响ClickHouse查询性能的因素很多。在大多数场景中,关键因素是ClickHouse在计算查询WHERE子句条件时是否可以使用主键。因此,选择适用于最常见查询模式的主键对于表的设计至关重要。 然而,无论如何仔细地调优主键&#xff…

深度图(Depth Map)

文章目录 深度图深度图是什么深度图的获取方式激光雷达或结构光等传感器的方法激光雷达RGB-D相机 双目或多目相机的视差信息计算深度采用深度学习模型估计深度 深度图的应用场景扩展阅读 深度图 深度图是什么 深度图(depth map)是一种灰度图像&#xf…

Windows 10 启用 Hyper-V

文章目录 Windows 10 启用 Hyper-V打开控制面板打开任务管理器 Windows 10 启用 Hyper-V 打开控制面板 打开程序和功能 启用或关闭Windows功能 立即重启 打开任务管理器 出现下图,代表已启用

医院pacs系统是什么?

医院pacs系统是什么? PACS系统的概念已从原来将数字化的医学影像通过网络传送到连接在网络上的影像显示工作站上作一般显示和进行数字化存储,发展成为以数字化诊断(无纸化、无胶片化)为核心的整个影像管理过程,包括&a…

2023/11/7 JAVA学习

ctrl alt t自动重写

Selenium爬取内容并存储至MySQL数据库

前面我通过一篇文章讲述了如何爬取博客摘要等信息。通常,在使用Selenium爬虫爬取数据后,需要存储在TXT文本中,但是这是很难进行数据处理和数据分析的。这篇文章主要讲述通过Selenium爬取我的个人博客信息,然后存储在数据库MySQL中,以便对数据进行分析,比如分析哪个时间段…

MAC设备(M1)环境下编译安装openCV for Java

最近发现一个需求,可以用openCV来实现,碰巧又新买了mac笔记本,就打算利用业余时间安装下openCV。这里将主要步骤记录下,希望能帮助有需要的人。 1、准备编译环境 #查询编译opencv相关依赖 brew info opencv查询结果如下图所示&a…

css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版

文章 <div class"contentBox"><p>这是一篇范文——仅供测试使用</p><p>With the coming of national day, I have a one week holiday. I reallyexpect to it, because it want to have a short trip during these days. Iwill travel to Ji…

结合双向LSTM和注意力机制的DQN-CE算法船舶能量调度

Title:Ship Energy Scheduling with DQN-CE Algorithm Combining Bi-directional LSTM and Attention Mechanism 【Applied Energy】结合双向LSTM和注意力机制的DQN-CE算法船舶能量调度(中科院1区Top,IF 11.2) 具体实现方法可以参考原文:论文地址 欢迎大家引用和交流,具体…

如何在在线Excel文档中规范单元格输入

在日常的工作中&#xff0c;我们常常需要处理大量的数据。为了确保数据的准确性和可靠性。我们需要对输入的数据进行规范化和验证。其中一个重要的方面是规范单元格输入。而数据验证作为Excel中一种非常实用的功能&#xff0c;它可以帮助用户规范单元格的输入&#xff0c;从而提…

学习日记01——JS基础01

JavaScrip简单介绍 是前端脚本语音&#xff0c;快速入门js基本语法&#xff0c;本篇文章涉及到JavaScrip基础的变量定义&#xff0c;数据类型和基础的流程控制语句。 使用到的工具 1&#xff0c;vscode 2&#xff0c;chrome浏览器 js的变量定义 准备工作&#xff08;简单的h…

【论文阅读】Progressive Spatio-Temporal Prototype Matching for Text-Video Retrieval

资料链接 论文链接&#xff1a;https://openaccess.thecvf.com/content/ICCV2023/papers/Li_Progressive_Spatio-Temporal_Prototype_Matching_for_Text-Video_Retrieval_ICCV_2023_paper.pdf 代码链接&#xff1a;https://github.com/imccretrieval/prost 背景与动机 文章发…

HTML使用canvas绘制海报(网络图片)

生成前&#xff1a; 生成后&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>媒体参会嘉宾邀请函生成链接</title><link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/vant2.10…