当前位置：首页 > web >正文

Taro 本地存储 API 详解与实用指南

web 2025/7/22 8:28:11

Taro 本地存储 API 详解与实用指南

在多端开发中，本地存储是非常常用的功能。无论是保存用户登录信息、缓存接口数据，还是实现离线体验，合理使用本地存储都能极大提升应用的性能和用户体验。Taro 作为一款多端统一开发框架，提供了与微信小程序一致的本地存储 API，支持异步和同步两种调用方式，方便开发者在不同平台下统一管理本地数据。

本文将详细介绍 Taro 的本地存储相关 API，包括：

Taro.setStorage(options)
Taro.getStorage(options)
Taro.removeStorage(options)
Taro.clearStorage()
Taro.getStorageSync(key)
Taro.setStorageSync(key, data)
Taro.removeStorageSync(key)
Taro.clearStorageSync()

一、异步 API

异步 API 适合在数据量较大或对性能有要求的场景，避免阻塞主线程。它们都返回 Promise，也可以通过回调函数处理结果。

1. Taro.setStorage(options)

作用：将数据存储在本地缓存中，异步接口。

参数说明：

key：本地缓存中的指定的 key
data：需要存储的内容，可以是任意类型
success、fail、complete：回调函数（可选）

示例：

import Taro from '@tarojs/taro';Taro.setStorage({key: 'userInfo',data: { name: '张三', age: 18 }
}).then(() => {console.log('存储成功');
});

2. Taro.getStorage(options)

作用：从本地缓存中异步获取指定 key 的内容。

参数说明：

key：本地缓存中的指定的 key
success、fail、complete：回调函数（可选）

示例：

Taro.getStorage({key: 'userInfo'
}).then(res => {console.log('获取到的数据：', res.data);
});

3. Taro.removeStorage(options)

作用：异步移除本地缓存中指定 key。

参数说明：

key：本地缓存中的指定的 key

示例：

Taro.removeStorage({key: 'userInfo'
}).then(() => {console.log('删除成功');
});

4. Taro.clearStorage()

作用：异步清理本地所有缓存。

示例：

Taro.clearStorage().then(() => {console.log('所有缓存已清空');
});

二、同步 API

同步 API 适合在初始化、生命周期钩子等对性能要求不高的场景，代码更简洁直接。

1. Taro.setStorageSync(key, data)

作用：同步将数据存储到本地缓存。

示例：

Taro.setStorageSync('token', 'abcdefg123456');

2. Taro.getStorageSync(key)

作用：同步获取本地缓存指定 key 的内容。

示例：

const token = Taro.getStorageSync('token');
console.log('token:', token);

3. Taro.removeStorageSync(key)

作用：同步移除本地缓存指定 key。

示例：

Taro.removeStorageSync('token');

4. Taro.clearStorageSync()

作用：同步清理本地所有缓存。

示例：

Taro.clearStorageSync();

三、使用建议与注意事项

数据类型
存储的数据可以是字符串、数字、对象、数组等，Taro 会自动进行序列化和反序列化。
容量限制
各平台本地存储容量有限（如微信小程序为 10MB），建议只存储必要的数据。
同步与异步选择
- 异步 API：推荐用于大部分业务场景，避免阻塞页面渲染。
- 同步 API：适合在 App 启动、页面初始化等对性能要求不高的场景。
安全性
本地存储的数据容易被用户清除或篡改，不建议存储敏感信息。
多端兼容
Taro 的本地存储 API 在小程序、H5、React Native 等平台均可用，代码高度复用。