uniapp如何实现储存
时间: 2025-02-04 16:53:03 浏览: 34
### UniApp 中的数据存储方法
#### 使用 `localStorage` 和 `sessionStorage`
在 UniApp 开发中,可以利用浏览器内置的 `localStorage` 和 `sessionStorage` 来保存简单的键值对数据。这两种方式适合用于存储少量且不需要复杂处理的信息。
对于 `localStorage` 的使用如下所示:
```javascript
// 存储数据到 localStorage
window.localStorage.setItem('key', 'value');
// 获取 localStorage 中的数据
const value = window.localStorage.getItem('key');
```
而针对 `sessionStorage` 则有相似的操作模式[^1]。
#### 使用 `uni.setStorageSync` 和 `uni.getStorageSync`
为了更方便地进行本地数据管理,UniApp 提供了同步版本的方法——`uni.setStorageSync` 与 `uni.getStorageSync`。这种方式适用于希望立即完成读写操作而不必等待异步回调的情况。
下面展示了如何运用这两个函数来存取字符串形式的数据:
```javascript
try {
// 同步设置缓存数据
uni.setStorageSync('cacheKey', JSON.stringify({ name: "张三", age: 20 }));
// 同步获取缓存数据并解析成 JavaScript 对象
const data = JSON.parse(uni.getStorageSync('cacheKey'));
} catch (e) {
console.error(e);
}
```
需要注意的是,当尝试存储的对象不是基本类型、日期或可被 JSON 序列化的对象时会抛出错误[^4]。
#### 使用 `uni.setStorage` 和 `uni.getStorage`
如果偏好于采用异步方式进行数据交互,则可以选择 `uni.setStorage` 及其对应的读取命令 `uni.getStorage`。这允许开发者更好地控制程序流,并能轻松应对可能发生的异常状况。
这里有一个例子说明怎样通过它们来进行数据交换:
```javascript
// 异步保存数据至 storage
uni.setStorage({
key: 'asyncCache',
data: { id: 1, title: '测试' },
success() {
console.log('成功保存');
}
});
// 异步检索 storage 内的数据
uni.getStorage({
key: 'asyncCache',
success(res) {
console.log(`从 storage 获得的数据为 ${res.data}`);
}
});
```
以上就是几种主要的 UniApp 数据存储手段及其具体实践案例[^3]。
阅读全文
相关推荐


















