一看就懂的 UniApp 数据缓存 API：一篇文章带你玩转本地存储！

UniApp 数据缓存 API 全面解析与最佳实践

在多平台跨端开发中，数据缓存是不可或缺的功能。UniApp 提供了一套强大的数据缓存 API，支持本地数据的存储、读取、删除和管理，适用于多种开发场景。本文将详细介绍这些 API 的功能、参数及使用方法，并分享一些实际开发中的应用技巧。

---

数据缓存 API 总览

UniApp 提供了两类缓存操作：同步操作和异步操作。下表列出了主要方法及其功能：

功能	同步 API	异步 API
存储数据	uni.setStorageSync	uni.setStorage
获取数据	uni.getStorageSync	uni.getStorage
移除指定数据	uni.removeStorageSync	uni.removeStorage
清除所有缓存	uni.clearStorageSync	uni.clearStorage
获取缓存信息	uni.getStorageInfoSync	uni.getStorageInfo

---

API 参数说明

以下是数据缓存 API 的详细参数及说明，适用于所有异步操作方法：

参数名	类型	必填	说明
key	string	是	缓存的键名，用于标识数据
data	any	否	要存储的数据，适用于 setStorage 系列
success	Function	否	操作成功时的回调函数
fail	Function	否	操作失败时的回调函数
complete	Function	否	操作完成时的回调函数，无论成功或失败均触发

注意： data 参数仅适用于存储操作方法，如 uni.setStorage 和 uni.setStorageSync。

---

方法详解与代码示例

1. 存储数据

异步存储数据：uni.setStorage

uni.setStorage({key: 'userInfo',data: { name: 'Alice', age: 25 },success: () => {console.log('数据存储成功！');},fail: (err) => {console.error('存储失败：', err);},complete: () => {console.log('存储操作完成');},
});

同步存储数据：uni.setStorageSync

try {uni.setStorageSync('userInfo', { name: 'Alice', age: 25 });console.log('同步存储成功！');
} catch (err) {console.error('同步存储失败：', err);
}

---

2. 读取数据

异步读取数据：uni.getStorage

uni.getStorage({key: 'userInfo',success: (res) => {console.log('获取的数据：', res.data);},fail: (err) => {console.error('获取数据失败：', err);},complete: () => {console.log('数据获取完成');},
});

同步读取数据：uni.getStorageSync

try {const data = uni.getStorageSync('userInfo');console.log('同步获取的数据：', data);
} catch (err) {console.error('同步获取失败：', err);
}

---

3. 删除数据

异步删除指定数据：uni.removeStorage

uni.removeStorage({key: 'userInfo',success: () => {console.log('数据移除成功！');},fail: (err) => {console.error('移除失败：', err);},complete: () => {console.log('移除操作完成');},
});

同步删除指定数据：uni.removeStorageSync

try {uni.removeStorageSync('userInfo');console.log('同步移除成功！');
} catch (err) {console.error('同步移除失败：', err);
}

---

4. 清除所有缓存

异步清除缓存：uni.clearStorage

uni.clearStorage({success: () => {console.log('缓存已清除！');},fail: (err) => {console.error('清除失败：', err);},complete: () => {console.log('清除缓存操作完成');},
});

同步清除缓存：uni.clearStorageSync

try {uni.clearStorageSync();console.log('同步清除缓存成功！');
} catch (err) {console.error('同步清除缓存失败：', err);
}

---

5. 获取缓存信息

异步获取缓存信息：uni.getStorageInfo

uni.getStorageInfo({success: (res) => {console.log('所有键名：', res.keys);console.log('当前缓存大小：', res.currentSize, 'KB');console.log('最大允许缓存大小：', res.limitSize, 'KB');},fail: (err) => {console.error('获取缓存信息失败：', err);},complete: () => {console.log('缓存信息获取完成');},
});

同步获取缓存信息：uni.getStorageInfoSync

try {const info = uni.getStorageInfoSync();console.log('所有键名：', info.keys);console.log('当前缓存大小：', info.currentSize, 'KB');console.log('最大允许缓存大小：', info.limitSize, 'KB');
} catch (err) {console.error('同步获取缓存信息失败：', err);
}

---

实用技巧与注意事项

1. 缓存大小限制

   • 小程序端缓存通常有限制。例如，微信小程序最大允许 10MB 缓存。
   • 可通过 uni.getStorageInfo 查看当前缓存使用情况，并定期清理不必要的数据。

2. 数据存储格式

   • 缓存数据可以是任意类型，但建议复杂对象使用 JSON 格式存储：

     uni.setStorageSync('config', JSON.stringify({ theme: 'dark', lang: 'en' }));
     const config = JSON.parse(uni.getStorageSync('config'));
     

3. 异步 vs. 同步

   • 异步方法：适用于耗时任务，不阻塞主线程。
   • 同步方法：适用于初始化加载等必须即时完成的操作，但可能影响性能。

4. 跨平台一致性

   • 不同平台对缓存的实现可能略有差异（如缓存大小限制），在开发中需充分测试以确保功能一致。

---

总结

UniApp 的数据缓存 API 提供了高效、灵活的本地存储解决方案，适用于跨端开发中的各种场景。无论是用户数据管理还是应用配置保存，这些方法都能帮助开发者优化性能和用户体验。熟练掌握这些 API，可以为你的应用开发增添更多可能性。

希望本文能为你提供帮助，欢迎分享你的开发经验或提出疑问！