php网站生成静态页面vi手册模板60页

数据缓存API

在 uni-app 开发中，数据缓存 API 起着重要作用，它能够将需要的数据保存到本地，同时也提供了获取本地缓存数据、移除缓存数据以及清理缓存数据的功能。在实际项目里，数据缓存 API 常被用于存储会员登录状态信息、购物车数据、用户浏览历史记录等。这些数据若频繁从服务器获取，会增加网络开销和响应时间，使用本地缓存能有效提升应用性能和用户体验。

将数据缓存到本地

在 uni-app 中，有两种方式可以将数据缓存到本地，分别是uni.setStorage(OBJECT)和uni.setStorageSync(KEY, DATA)。

1. uni.setStorage(OBJECT)

• • 此方法以异步方式将数据存储在本地缓存指定的key中，会覆盖掉key原来对应的内容。
• • 参数说明：
• • • key（必填）：本地缓存中指定的key，通过这个key来唯一标识缓存的数据。
• • • data（必填）：需要缓存的内容，这里只支持原生类型（如字符串、数字、布尔值等）和能通过JSON.stringify序列化的对象。
• • • success、fail、complete：这三个是回调函数。success在数据成功缓存到本地后触发；fail在缓存过程中出现错误时触发；complete无论缓存操作成功与否，在操作结束时都会执行。
• • 示例代码：

let userInfo = {name: '张三', age: 25};
uni.setStorage({key: 'user_info',data: userInfo,success: function () {console.log('数据缓存成功');},fail: function (err) {console.log('数据缓存失败', err);},complete: function () {console.log('缓存操作结束');}
});

1. uni.setStorageSync(KEY, DATA)

• • 该方法以同步方式将数据存储在本地缓存指定的key中，同样会覆盖掉key原来对应的内容。相较于异步缓存方式，它的代码编写更为简洁。
• • 参数说明：
• • • key（必填）：本地缓存中指定的key。
• • • data（必填）：需要缓存的内容，要求与uni.setStorage中的data一致，只支持原生类型和能通过JSON.stringify序列化的对象。
• • 同步与异步的区别：

同步：等本地缓存成功后，再执行下面的程序

异步：不需要等待本地缓存成功，就可以执行下面的程序

在数据缓存比较耗时的情况下，可以使用异步方式进行数据缓存。

• • 示例代码：

let userInfo = {name: '李四', age: 30};
try {uni.setStorageSync('user_info', userInfo);console.log('数据同步缓存成功');
} catch (err) {console.log('数据同步缓存失败', err);
}

不论是同步还是异步方式，本质上都是以 “key/value” 的形式存储数据的。

获取本地缓存数据

uni-app 为获取本地缓存数据提供了 4 个 API，分别从不同角度满足开发者获取缓存数据的需求。

1. uni.getStorage(OBJECT)

• • 此方法以异步方式从本地缓存中获取key对应的数据。
• • 参数说明：
• • • key（必填）：本地缓存中指定的key，通过这个key来获取对应的数据。
• • • success、fail、complete：回调函数。success在成功获取到数据时触发，返回的数据在回调函数的参数中；fail在获取数据失败时触发；complete在操作结束时执行。
• • 示例代码：

uni.getStorage({key: 'user_info',success: function (res) {console.log('获取数据成功', res.data);},fail: function (err) {console.log('获取数据失败', err);},complete: function () {console.log('获取数据操作结束');}
});

1. uni.getStorageSync(KEY)

• • 这是一个同步的 API，只有一个参数key。它从本地缓存中以同步方式获取key对应的数据。
• • 示例代码：

try {let userInfo = uni.getStorageSync('user_info');console.log('同步获取数据成功', userInfo);
} catch (err) {console.log('同步获取数据失败', err);
}

1. uni.getStorageInfo(OBJECT)

• • 该方法以异步方式获取本地所有key的集合。
• • 参数说明：
• • • success、fail、complete：回调函数。success回调函数的参数有keys（本地所有key组成的数组）、currentSize（当前本地缓存占用的空间大小）、limitSize（本地缓存允许的最大空间大小）。通过这些参数，开发者可以了解本地缓存的整体情况。
• • 示例代码：

uni.getStorageInfo({success: function (res) {console.log('获取本地缓存信息成功', res.keys);console.log('当前缓存大小', res.currentSize);console.log('缓存限制大小', res.limitSize);},fail: function (err) {console.log('获取本地缓存信息失败', err);},complete: function () {console.log('获取本地缓存信息操作结束');}
});

1. uni.getStorageInfoSync()

• • 此方法以同步方式获取本地所有key的集合。
• • 示例代码：

try {let storageInfo = uni.getStorageInfoSync();console.log('同步获取本地缓存信息成功', storageInfo.keys);console.log('当前缓存大小', storageInfo.currentSize);console.log('缓存限制大小', storageInfo.limitSize);
} catch (err) {console.log('同步获取本地缓存信息失败', err);
}

前两个 API（uni.getStorage和uni.getStorageSync）用于从指定key获得缓存数据，而后两个（uni.getStorageInfo和uni.getStorageInfoSync）则是获取本地所有key的集合。

清理本地缓存数据

在开发中，有时需要清理本地缓存数据，uni-app 提供了相应的 API 来实现这一功能。

1. uni.removeStorage(OBJECT)

• • 此方法以异步方式从本地缓存中移除指定key。
• • 参数说明：
• • • key：本地缓存中要移除的key。
• • • success、fail、complete：回调函数。success在成功移除key对应的数据后触发；fail在移除过程中出现错误时触发；complete在操作结束时执行。
• • 示例代码：

uni.removeStorage({key: 'user_info',success: function () {console.log('数据移除成功');},fail: function (err) {console.log('数据移除失败', err);},complete: function () {console.log('移除数据操作结束');}
});

1. uni.removeStorageSync(KEY)

• • 该方法以同步方式从本地缓存中移除指定的key。
• • 示例代码：

try {uni.removeStorageSync('user_info');console.log('数据同步移除成功');
} catch (err) {console.log('数据同步移除失败', err);
}

1. uni.clearStorage () 和 uni.clearStorageSync ()

• • 这两个方法用来清理本地所有缓存数据。uni.clearStorage()采用异步方式，uni.clearStorageSync()采用同步方式。
• • 示例代码（异步）：

uni.clearStorage({success: function () {console.log('所有缓存数据异步清理成功');},fail: function (err) {console.log('所有缓存数据异步清理失败', err);},complete: function () {console.log('异步清理缓存操作结束');}
});

• 示例代码（同步）：

try {uni.clearStorageSync();console.log('所有缓存数据同步清理成功');
} catch (err) {console.log('所有缓存数据同步清理失败', err);
}