【Taro】同步缓存与异步缓存的区别详解

在使用 Taro 开发微信小程序时，数据存储是非常常见的需求。Taro 提供了两种本地存储方式：同步缓存和异步缓存。这两种方式在使用场景、性能和代码风格上各有特点。本文将详细介绍同步缓存与异步缓存的区别，帮助开发者在实际项目中做出最佳选择。

一、本地存储的基本概念

微信小程序的本地存储功能由 Taro 提供，底层实现基于微信小程序原生的存储 API，支持将数据存储在用户设备中。Taro 的存储方法包括：

• 同步缓存：Taro.setStorageSync 和 Taro.getStorageSync，直接同步操作数据。
• 异步缓存：Taro.setStorage 和 Taro.getStorage，基于异步操作。

它们都可以存储基本类型（字符串、数字等）和复杂数据类型（对象、数组等），并在小程序运行期间以及关闭后仍然有效。

---

二、同步缓存与异步缓存的核心区别

1. 调用方式

同步缓存： 同步缓存是阻塞式的操作，代码会在存储或获取数据完成后继续执行后续逻辑。

示例：

Taro.setStorageSync('key', 'value');
const value = Taro.getStorageSync('key');
console.log(value); // 输出：'value'

异步缓存： 异步缓存是非阻塞的操作，数据的存储或获取通过 Promise 或回调函数完成。

示例：

Taro.setStorage({ key: 'key', data: 'value' }).then(() => {
  console.log('存储成功');
});

Taro.getStorage({ key: 'key' }).then((res) => {
  console.log(res.data); // 输出：'value'
});

2. 性能对比

同步缓存： 由于同步操作会阻塞主线程，适合小数据量的简单存储。如果数据量较大或操作频繁，可能会造成性能问题。

异步缓存： 异步操作不会阻塞主线程，适合需要存储或读取大数据量的场景。由于异步机制，其操作不会影响界面渲染和用户交互。

3. 使用场景

类型	适用场景
同步缓存	- 简单逻辑场景（如获取用户 ID、标志位等）。 - 初始化时需要立即使用的数据。
异步缓存	- 数据量较大或频繁读写的场景。 - 对性能敏感的复杂业务逻辑。

---

三、同步缓存与异步缓存的基本用法

同步缓存的使用

设置数据

Taro.setStorageSync('username', 'Alice');

获取数据

const username = Taro.getStorageSync('username');
console.log(username); // 输出：'Alice'

删除数据

Taro.removeStorageSync('username');

清除所有数据

Taro.clearStorageSync();

异步缓存的使用

设置数据

Taro.setStorage({ key: 'username', data: 'Alice' })
  .then(() => {
    console.log('存储成功');
  });

获取数据

Taro.getStorage({ key: 'username' })
  .then((res) => {
    console.log(res.data); // 输出：'Alice'
  })
  .catch(() => {
    console.log('获取失败');
  });

删除数据

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

清除所有数据

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

---

四、实际应用场景解析

场景 1：初始化用户配置

在小程序启动时，通常需要加载一些关键数据（如用户 ID、语言偏好）。此时，使用同步缓存可以确保数据在逻辑继续之前完成加载。

const userId = Taro.getStorageSync('userId');
if (userId) {
  console.log(`当前用户ID: ${userId}`);
} else {
  console.log('用户未登录');
}

场景 2：异步加载大数据

当需要处理较大的数据存储时，异步缓存是更好的选择。例如存储用户的浏览历史或大段文本。

Taro.setStorage({
  key: 'history',
  data: ['页面1', '页面2', '页面3']
}).then(() => {
  console.log('浏览历史已保存');
});

场景 3：结合 Promise 链处理复杂逻辑

异步缓存可以结合 Promise 链式调用来实现更复杂的业务逻辑。

Taro.setStorage({ key: 'username', data: 'Alice' })
  .then(() => Taro.getStorage({ key: 'username' }))
  .then((res) => {
    console.log(`用户名: ${res.data}`);
  })
  .catch(() => {
    console.error('操作失败');
  });

---

五、注意事项

1. 数据存储限制

微信小程序的本地存储总容量限制为 10MB，在设计存储方案时需要注意避免超出限制。

2. 同步与异步的选择

• 如果数据存储操作与界面渲染无关，建议优先使用 异步缓存，以保证性能。
• 对于初始化数据或用户体验要求高的场景，可以选择 同步缓存。

3. 数据格式

建议存储复杂数据时，使用 JSON.stringify 和 JSON.parse 确保数据的一致性。

// 存储复杂数据
Taro.setStorageSync('user', JSON.stringify({ name: 'Alice', age: 25 }));

// 读取复杂数据
const user = JSON.parse(Taro.getStorageSync('user'));
console.log(user.name); // 输出：Alice

---

六、总结

同步缓存和异步缓存各有优劣，选择合适的存储方式可以提升代码的可维护性和小程序的性能：

• 同步缓存：适合简单数据的快速存储和读取。
• 异步缓存：适合复杂逻辑、大数据存储以及对性能要求高的场景。

推荐：

• JavaScript
• react
• vue

---