uni-app 如何使用本地存储？

推荐答案

在 uni-app 中，可以使用 uni.setStorageSync 和 uni.getStorageSync 来进行本地存储操作。以下是一个简单的示例：

// www.javascriptcn.com code example
// 存储数据
uni.setStorageSync('key', 'value');

// 获取数据
let value = uni.getStorageSync('key');
console.log(value); // 输出: value

// 移除数据
uni.removeStorageSync('key');

// 清空所有数据
uni.clearStorageSync();

本题详细解读

1. uni.setStorageSync(key, data)

• 功能: 将数据同步存储到本地缓存中。
• 参数:
  • key: 存储的键名，类型为字符串。
  • data: 需要存储的数据，可以是任意类型。
• 注意事项: 如果存储的数据较大，建议使用异步存储 uni.setStorage。

2. uni.getStorageSync(key)

• 功能: 从本地缓存中同步获取指定 key 对应的数据。
• 参数:
  • key: 需要获取数据的键名，类型为字符串。
• 返回值: 返回存储的数据，如果 key 不存在则返回 undefined。

3. uni.removeStorageSync(key)

• 功能: 从本地缓存中同步移除指定 key 对应的数据。
• 参数:
  • key: 需要移除数据的键名，类型为字符串。

4. uni.clearStorageSync()

• 功能: 同步清除本地缓存中的所有数据。

5. 异步存储与获取

除了同步方法，uni-app 还提供了异步的存储与获取方法：

// www.javascriptcn.com code example
// 异步存储数据
uni.setStorage({
  key: 'key',
  data: 'value',
  success: function () {
    console.log('存储成功');
  }
});

// 异步获取数据
uni.getStorage({
  key: 'key',
  success: function (res) {
    console.log(res.data); // 输出: value
  }
});

// 异步移除数据
uni.removeStorage({
  key: 'key',
  success: function () {
    console.log('移除成功');
  }
});

// 异步清空所有数据
uni.clearStorage({
  success: function () {
    console.log('清空成功');
  }
});

6. 注意事项

• 数据大小限制: 本地存储有大小限制，通常为 10MB 左右，具体取决于平台。
• 数据类型: 存储的数据可以是任意类型，但建议存储 JSON 格式的数据，便于后续处理。
• 同步与异步: 同步方法会阻塞代码执行，适合存储小数据；异步方法不会阻塞代码执行，适合存储大数据或需要处理回调的场景。

通过以上方法，你可以在 uni-app 中轻松实现本地存储功能。