uni-app项目实战笔记21--uniapp缓存的写入和读取

moxiaoran57532025-06-23 8:02

一、缓存的写入

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

// 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）。