一、缓存的写入

uni.setStorageSync("storageClassList",classifyList.value)

二、缓存的读取,如果缓存不存在,则返回空数组

const storageClassList = uni.getStorageSync("storageClassList") || [];

三、对读取到的数据进行转换处理

// 1. 创建响应式数组
const classList = ref([])  
// 2. 从本地存储读取数据
const storageClassList = uni.getStorageSync("storageClassList") || []; 
// 3. 数据转换处理
classList.value = storageClassList.map(item => {  return {...item,  // 保留原数据picurl: item.smallPicurl.replace("_small.webp", ".jpg")  // 修改图片格式}
})

知识要点1:

const storageClassList = uni.getStorageSync("storageClassList") || []
通过 uni-app 的 API uni.getStorageSync 从本地缓存中读取键为 "storageClassList" 的数据。
如果缓存中没有该数据(返回 null 或 undefined),则默认赋值为空数组 [](避免后续 .map 方法报错)。

 要点2:

classList.value = storageClassList.map(item => {...})
对 storageClassList 中的每一项(item)进行 数据转换:
...item:使用扩展运算符保留原对象的所有属性。

picurl: item.smallPicurl.replace("_small.webp", ".jpg"):

将 smallPicurl 字段中的 _small.webp 后缀替换为 .jpg,生成新的 picurl 字段。

将小图格式(_small.webp)转换为标准图片格式(.jpg)。

 典型应用场景:


从缓存加载分类数据:在页面初始化时,优先使用本地缓存数据(提升加载速度)。

图片格式统一处理:将缩略图路径转换为高清图路径(可能用于详情页展示)。

数据兼容性处理:确保即使缓存无数据,程序也能安全运行(|| [] 的兜底逻辑)。

 注意:uni.getStorageSync 是 uni-app 特有的 API,在非 uni-app 项目中需替换为其他存储方案(如 localStorage)。

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zama密码分析资助计划

1. 引言 2025年5月,Zama团队正式启动了 Zama 密码分析资助计划(Cryptanalysis Grant Program),以支持那些致力于“破解”系统的研究人员: 无论是通过密码分析、侧信道攻击、故障注入,还是其他创新性方法。…

【数据结构与算法】数据结构初阶:详解顺序表和链表(一)

🔥个人主页:艾莉丝努力练剑 ❄专栏传送门:《C语言》、《数据结构与算法》 🍉学习方向:C/C方向 ⭐️人生格言:为天地立心,为生民立命,为往圣继绝学,为万世开太平 前言&am…

Arrays.asList() 的不可变陷阱:问题、原理与解决方案

🚨 Arrays.asList() 的不可变陷阱:问题、原理与解决方案 #Java集合 #开发陷阱 #源码解析 #编程技巧 一、问题现象:无法修改的集合 当开发者使用 Arrays.asList() 转换数组为集合时,尝试添加/删除元素会抛出异常: St…

uniapp对接融云IM即时通讯,语音消息无法播放

uniapp对接融云IM即时通讯,语音消息无法播放 问题背景解决方案1.本地音频播放2.远程音频播放 问题背景 最近使用uniapp对接融云的即时通讯sdk,发送语音消息后,本地音频(local)和远程音频(remote&#xff0…

【C++开发】CMake构建工具

目录 1,CMake介绍 2,配置文件CMakeLists.txt 1,CMake介绍 CMake 是一个开源的、跨平台的自动化构建系统生成工具,广泛用于 C 和 C 项目的构建管理。它使用一个名为 CMakeLists.txt 的配置文件来定义如何构建项目,并能…

大模型MetaGPT面试题汇总及参考答案

目录 MetaGPT 的核心目标与设计理念是什么? 它如何实现多角色协同(如 Planner、Coder、Reviewer、Tester)? 不同 agent 之间的通信机制是怎样的? MetaGPT 是如何进行任务拆分与任务分配的? 它如何实现可执行的反馈循环(self-correcting)? 在实际项目中如何监控各…

深入理解 HTTP 状态码 —— 前端后端必备知识

📚深入理解 HTTP 状态码 —— 前端后端必备知识 作者:lvzi 日期:2025 年 6 月 22 日 标签:HTTP、前端、后端、状态码、Web基础 💡引言 在 Web 开发过程中,我们经常会遇到形如 200 OK、404 Not Found、500…

Python商务数据分析——Python 入门基础知识学习笔记

一、简介 1.1 Python 特性 解释型语言:代码无需编译可直接运行,适合快速开发。 动态类型:变量类型在运行时确定(如x1后x"str"仍合法)。 面向对象:支持类、对象、继承等特性,代码可…

IT小白到高手:HCIA、HCIP、HCIE认证攻略

大家好,这里是G-LAB IT实验室。6月22日,周日!HCIA+CCNA开新班啦! 01 华为HCIA、HCIP、HCIE有必要考证吗 在如今竞争激烈的IT行业,华为的认证体系已成为众多网络工程师的重要参考。…

【IndexDB】前端IndexedDB终极指南

前端 IndexedDB 详细教程 IndexedDB 是一个浏览器内置的 NoSQL 数据库系统,允许在客户端存储大量结构化数据,并支持高性能搜索。相比 localStorage,IndexedDB 更适合存储大量数据并提供更复杂的查询功能。 基本概念 数据库:每个…

扩散模型与强化学习(1):字节Seedance中的人类偏好优化实践

扩散模型与强化学习(0):专栏汇总与导航 前言:最近强化学习在Diffusion Models得到了越来越多广泛的应用,本专栏将系统性地介绍当前Diffusion Models中实用且前沿的技术进展。这篇博客介绍字节最新的视频生成模型Seedance 1.0: Exploring the …

【内存】Linux 内核优化实战 - vm.max_map_count

目录 vm.max_map_count参数全面解析一、参数定义与核心作用二、默认值与关键调整场景1. 默认限制与不足场景2. 典型报错案例 三、操作指南:查看与修改方法四、场景化建议值与配置示例五、关键注意事项六、延伸知识:内存映射的底层逻辑 vm.max_map_count参…

组件之间的双向绑定:v-model

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…

GetX 实现 MVVM 架构, 高效 路由管理 和 状态管理

GetX是Flutter中的一个高效的状态管理与路由管理框架,结合MVVM架构能简化代码逻辑。以下是使用GetX实现MVVM架构,并完成路由和状态管理的核心思路与实践: 一、MVVM架构在GetX中的映射 MVVM(Model-View-ViewModel)与G…

Qt项目,记事本

一、项目说明 项目功能: (1)打开文件:点击打开文件按钮弹出对话框,选择文本文件后,在主窗口编辑界面显示内容。 (2)关闭文件:关闭打开的文件,并询问是否保存…

【全开源】填表问卷统计预约打卡表单系统+uniapp前端

一.系统介绍 填表问卷统计预约打卡表单系统是ThinkPHPUniApp开发的一款集信息填表、预约报名,签到打卡、活动通知、报名投票、班级统计等功能的自定义表单统计小程序。 二.搭建环境 系统环境:CentOS、 运行环境:宝塔 Linux 网站环境&…

开源 python 应用 开发(一)python、pip、pyAutogui、python opencv安装

最近有个项目需要做视觉自动化处理的工具,最后选用的软件为python,刚好这个机会进行系统学习。短时间学习,需要快速开发,所以记录要点步骤,防止忘记。 链接: 开源 python 应用 开发(一&#x…

SpringCloud + Zookeeper + Feign整合及Feign原理

知其然 SpringCloud Zookeeper Spring Cloud 与 Zookeeper的整合只需要添加相关的starter依赖和增加相关注解即可完成。 pom.xml 如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.…

深入探索 OpenCV 图像识别:从基础到深度学习

在当今数字化时代&#xff0c;图像识别技术已经渗透到我们生活的方方面面&#xff0c;从智能手机中的拍照翻译功能到自动驾驶汽车的目标检测系统&#xff0c;图像识别的应用无处不在。作为一名算法工程师&#xff0c;我有幸深入研究并实践了 OpenCV 在图像识别领域的强大功能。…

Hadoop部署(HA)高可用集群

一、准备工作 1.把集群全部停掉 在三台节点上都做&#xff08;在xshell通过右键----> 发送输入到--->所有会话&#xff09; 2..在/export/servers下创建HA目录 sudo mkdir -p /export/servers/HA 3.创建用户和设置所属主和所属组 #创建用户 sudo adduser ygre #设置…