在移动应用开发中，数据缓存是提升性能和用户体验的关键技术。uni-app 作为一款基于 Vue.js 的跨平台开发框架，提供了丰富而强大的数据缓存功能，支持本地存储、同步与异步操作等多种方式。本文将详细介绍 uni-app 中的数据缓存机制，包括存储、读取、删除、过期处理以及性能优化等内容，帮助开发者更好地理解和使用这一功能。
一、uni-app 数据缓存基础
uni-app 提供了多种数据缓存 API，这些 API 主要分为同步和异步两种方式，适用于不同的场景。
（一）存储数据
1. 异步存储：uni.setStorage
异步存储不会阻塞主线程，适合在不影响用户体验的情况下使用。
uni.setStorage({
key: 'user_info', // 缓存的键名
data: { name: '张三', age: 25 }, // 缓存的数据
success: function () {
console.log('数据缓存成功');
},
fail: function (err) {
console.log('数据缓存失败', err);
}
});
2. 同步存储：uni.setStorageSync
同步存储会阻塞主线程，适合在需要立即确认存储结果的场景中使用。
try {
uni.setStorageSync('user_info', { name: '李四', age: 30 });
console.log('数据同步缓存成功');
} catch (err) {
console.log('数据同步缓存失败', err);
}
（二）读取数据
1. 异步读取：uni.getStorage
异步读取不会阻塞主线程，适合在需要从缓存中获取数据但不急于使用时使用。
uni.getStorage({
key: 'user_info',
success: function (res) {
console.log('获取数据成功', res.data);
},
fail: function (err) {
console.log('获取数据失败', err);
}
});
2. 同步读取：uni.getStorageSync
同步读取会阻塞主线程，适合在需要立即获取缓存数据的场景中使用。
try {
let userInfo = uni.getStorageSync('user_info');
console.log('同步获取数据成功', userInfo);
} catch (err) {
console.log('同步获取数据失败', err);
}
（三）删除数据
1. 异步删除：uni.removeStorage
异步删除不会阻塞主线程，适合在不需要立即确认删除结果的场景中使用。
uni.removeStorage({
key: 'user_info',
success: function () {
console.log('数据移除成功');
},
fail: function (err) {
console.log('数据移除失败', err);
}
});
2. 同步删除：uni.removeStorageSync
同步删除会阻塞主线程，适合在需要立即确认删除结果的场景中使用。
try {
uni.removeStorageSync('user_info');
console.log('数据同步移除成功');
} catch (err) {
console.log('数据同步移除失败', err);
}
（四）清空所有缓存
1. 异步清空：uni.clearStorage
异步清空不会阻塞主线程，适合在不需要立即确认清空结果的场景中使用。
uni.clearStorage({
success: function () {
console.log('所有缓存已清空');
}
});
2. 同步清空：uni.clearStorageSync
同步清空会阻塞主线程，适合在需要立即确认清空结果的场景中使用。
try {
uni.clearStorageSync();
console.log('所有缓存已同步清空');
} catch (err) {
console.log('清空缓存失败', err);
}
注意：清空缓存时需谨慎操作，避免误删重要数据。
二、数据缓存的高级用法
（一）缓存数据的过期处理
在实际开发中，缓存数据可能会因过期而失效。可以通过在存储数据时附带一个时间戳来实现过期处理。
1. 存储数据时添加时间戳
const now = Date.now(); // 获取当前时间戳
uni.setStorageSync('user_info', { name: '张三', age: 25, timestamp: now });
2. 检查数据是否过期
const userInfo = uni.getStorageSync('user_info');
const now = Date.now(); // 获取当前时间戳
const EXPIRE_TIME = 60 * 60 * 1000; // 缓存有效期为1小时
if (now - userInfo.timestamp > EXPIRE_TIME) {
console.log('缓存已过期');
} else {
console.log('缓存有效', userInfo);
}
（二）使用 Vuex 管理缓存
Vuex 是 Vue.js 的状态管理工具，uni-app 也支持 Vuex。可以将需要共享的数据存储在 Vuex 中，同时结合本地缓存实现持久化存储。
1. 在 Vuex 的 actions 中
setUserInfo({ commit }, userInfo) {
commit('SET_USER_INFO', userInfo); // 更新 Vuex 状态
uni.setStorageSync('user_info', userInfo); // 同步到本地缓存
}
2. 在 Vuex 的 mutations 中
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo; // 更新 Vuex 状态
}
3. 在应用初始化时，从本地缓存读取数据并存入 Vuex
const userInfo = uni.getStorageSync('user_info');
if (userInfo) {
store.commit('SET_USER_INFO', userInfo); // 将本地缓存数据同步到 Vuex
}
这样可以实现数据在不同页面之间的共享，并且通过本地缓存持久化存储，即使应用重新启动，数据也不会丢失。
（三）使用全局变量管理缓存
除了 Vuex，还可以通过全局变量来管理缓存数据。uni-app 提供了 uni.getStorageSync 和 uni.setStorageSync 等同步 API，方便在全局变量中直接操作缓存。
1. 在 main.js 中初始化全局变量
uni.$globalData = {
userInfo: null
};
2. 在页面中使用全局变量
export default {
onLoad() {
const userInfo = uni.getStorageSync('user_info');
if (userInfo) {
uni.$globalData.userInfo = userInfo; // 将缓存数据存储到全局变量
}
},
methods: {
updateUserInfo() {
const newUserInfo = { name: '王五', age: 35 };
uni.setStorageSync('user_info', newUserInfo); // 更新缓存
uni.$globalData.userInfo = newUserInfo; // 更新全局变量
}
}
};
（四）缓存数据的加密与解密
对于敏感数据（如用户信息、密码等），建议在存储到本地缓存之前进行加密处理，以增强数据的安全性。uni-app 提供了 crypto 模块，可以方便地实现加密和解密操作。
1. 加密存储数据
const crypto = require('crypto');
function encryptData(data) {
const cipher = crypto.createCipher('aes-128-ecb', 'your-secret-key');
let encrypted = cipher.update(JSON.stringify(data), 'utf8', 'hex');
encrypted += cipher.final('hex');
return encrypted;
}
const userInfo = { name: '张三', age: 25 };
const encryptedUserInfo = encryptData(userInfo);
uni.setStorageSync('user_info', encryptedUserInfo);
2. 解密读取数据
function decryptData(encryptedData) {
const decipher = crypto.createDecipher('aes-128-ecb', 'your-secret-key');
let decrypted = decipher.update(encryptedData, 'hex', 'utf8');
decrypted += decipher.final('utf8');
return JSON.parse(decrypted);
}
const encryptedUserInfo = uni.getStorageSync('user_info');
const decryptedUserInfo = decryptData(encryptedUserInfo);
console.log('解密后的数据', decryptedUserInfo);
注意：加密和解密时使用的密钥必须保持一致，否则会导致解密失败。
三、性能优化与注意事项
（一）缓存大小限制
-
uni-app 的本地缓存大小有限制，通常为 10MB 左右（具体取决于平台）。如果缓存过多数据，可能会导致存储失败。
-
建议定期清理过期或不再需要的缓存数据。
（二）合理使用同步与异步操作
-
同步操作会阻塞主线程，建议在不影响用户体验的情况下使用异步操作。
-
如果需要立即获取缓存数据，可以使用同步操作，但需注意性能问题。
（三）缓存数据的安全性
-
本地缓存数据存储在设备上，可能会被用户或其他应用访问。
-
对于敏感数据（如用户信息、密码等），建议进行加密处理后再存储。
（四）缓存数据的清理策略
-
对于不再需要的缓存数据，应及时清理，以释放存储空间。
-
可以设置定时任务，定期清理过期的缓存数据。
（五）调试与测试
-
在开发过程中，可以通过
uni.getStorageInfo和uni.getStorageInfoSync获取当前缓存的详细信息，方便调试和测试。 -
示例代码
uni.getStorageInfo({ success: function (res) { console.log('当前缓存信息', res); } });
四、实际案例与应用场景
（一）用户登录状态缓存
在用户登录后，将用户的登录信息（如 token、用户 ID 等）存储到本地缓存中，以便在应用的其他页面中使用。
// 登录成功后存储用户信息
uni.setStorageSync('user_token', 'abc123');
uni.setStorageSync('user_id', 12345);
// 在其他页面中读取用户信息
const userToken = uni.getStorageSync('user_token');
const userId = uni.getStorageSync('user_id');
（二）配置信息缓存
将应用的配置信息（如 API 地址、主题颜色等）存储到本地缓存中，避免每次启动应用时都重新加载。
// 存储配置信息
uni.setStorageSync('config', { apiBaseUrl: 'https://api.example.com', themeColor: '#FF0000' });
// 读取配置信息
const config = uni.getStorageSync('config');
console.log('API 基础地址', config.apiBaseUrl);
console.log('主题颜色', config.themeColor);
（三）离线数据缓存
在应用中缓存一些用户可能需要离线访问的数据，例如文章列表、用户收藏等。
// 缓存文章列表
uni.setStorageSync('article_list', [{ id: 1, title: '文章标题1' }, { id: 2, title: '文章标题2' }]);
// 读取缓存的文章列表
const articleList = uni.getStorageSync('article_list');
console.log('缓存的文章列表', articleList);
五、总结
uni-app 提供了强大的数据缓存功能，通过合理使用 uni.setStorage、uni.getStorage、uni.removeStorage 和 uni.clearStorage 等 API，可以实现高效的数据存储和读取。结合 Vuex 和缓存过期机制，可以进一步提升应用的性能和用户体验。在实际开发中，需要注意缓存大小限制、同步与异步操作的合理使用以及缓存数据的安全性。
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
