第15章 React Native 移除 AsyncStorage：异步持久化存储与替代方案

版本：0.77 ❌ AsyncStorage 已移除。请改用其他社区维护的包。 AsyncStorage 是一个未加密、异步、持久化的键值存储系统，作用于整个 App 全局。它应替代 LocalStorage 使用。 由于 AsyncStorage 是全局操作，除了轻量级使用场景外，建议在它之上封装一层抽象接口，避免直接使用。 在 iOS 上，AsyncStorage 由原生代码支持，将小数值存储在序列化字典中，将大数值存储在独立文件中。在 Android 上，AsyncStorage 会根据可用情况使用 RocksDB 或 SQLite。 AsyncStorage 的 JavaScript 代码是一个外观层，提供清晰的 JavaScript API、真实的 Error 对象和非并发函数。API 中的每个方法都返回一个 Promise 对象。 导入 AsyncStorage 库： React JSX import {AsyncStorage} from 'react-native';
持久化数据： React JSX _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
'I like to save it.',
);
} catch (error) {
// 保存数据出错
}
};
获取数据： React JSX _retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('TASKS');
if (value !== null) {
// 有数据了
console.log(value);
}
} catch (error) {
// 获取数据出错
}
};
参考 方法 ​ getItem()​ React JSX static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)
根据 key 获取项目，完成后调用回调。返回一个 Promise 对象。 参数： 名称 类型 必填 描述 key string 是 要获取的项的 key。 callback ?(error: ?Error, result: ?string) => void 否 找到结果或发生错误时调用的函数。 ​ setItem()​ React JSX static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
为 key 设置值，完成后调用回调。返回一个 Promise 对象。 参数： 名称 类型 必填 描述 key string 是 要设置值的 key。 value string 是 要为 key 设置的值。 callback ?(error: ?Error) => void 否 发生错误时调用的函数。 ​ removeItem()​ React JSX static removeItem(key: string, [callback]: ?(error: ?Error) => void)
删除指定键对应的数据项，并在完成后调用回调。返回 Promise 对象。 参数： 名称类型必填描述keystring是待删除数据项的键.callback?(error: ?Error) => void否发生错误时将调用的函数。 mergeItem()​ React JSXstatic mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
假设现有键值与输入值均为 JSON 字符串化数据，将二者合并。返回 Promise 对象。 注意：并非所有原生实现均支持此功能。 参数： 名称类型必填描述keystring是要修改的数据项的键.valuestring是合并至该键的新值.callback?(error: ?Error) => void否发生错误时将调用的函数。 示例： React JSXlet UID123_object = {
name: 'Chris',
age: 30,
traits: {hair: 'brown', eyes: 'brown'},
};
// 你只需定义需要添加或更新的字段
let UID123_delta = {
age: 31,
traits: {eyes: 'blue', shoe_size: 10},
};

AsyncStorage.setItem(
'UID123',
JSON.stringify(UID123_object),
() => {
AsyncStorage.mergeItem(
'UID123',
JSON.stringify(UID123_delta),
() => {
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
},
);
},
);

// 控制台输出结果：
// => {'name':'Chris','age':31,'traits':
// {'shoe_size':10,'hair':'brown','eyes':'blue'}}
clear()​ React JSXstatic clear([callback]: ?(error: ?Error) => void)
清除所有客户端、库等的全部 AsyncStorage 数据。你通常不需要调用此方法；如需清空仅限你应用的数据，请使用 removeItem 或 multiRemove。返回 Promise 对象。 参数： 名称类型必填描述callback?(error: ?Error) => void否发生错误时将调用的函数。 getAllKeys()​ React JSXstatic getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void)
获取你应用已知的所有键；涵盖所有调用方、库等。返回 Promise 对象。 参数： 名称类型必填描述callback?(error: ?Error, keys: ?Array) => void否将传入所有找到的键以及任何错误的函数。 flushGetRequests()​ React JSXstatic flushGetRequests(): [object Object]
通过一次批量调用清空所有待处理的请求以获取数据。 multiGet()​ React JSXstatic multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void)
传入一个 key 数组，即可批量获取对应的存储项。回调函数会收到一个由找到的键值对组成的数组： multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
该方法返回一个 Promise 对象。 参数： 名称类型必填描述keysArray是要获取的存储项的 key 数组。callback?(errors: ?Array, result: ?Array>) => void否回调函数，会收到一个由键值对数组组成的数组，以及各 key 对应错误的数组。 示例： React JSXAsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (err, stores) => {
stores.map((result, i, store) => {
// get at each store's key/value so you can work with it
let key = store[i][0];
let value = store[i][1];
});
});
});
multiSet()​ React JSXstatic multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void)
用于批量存储多个键值对。操作完成后会收到一次回调，其中包含所有发生的错误： multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
该方法返回一个 Promise 对象。 参数： 名称类型必填描述keyValuePairsArray>是要存储的键值对数组。callback?(errors: ?Array) => void否回调函数，会收到各 key 对应错误的数组。 multiRemove()​ React JSXstatic multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void)
批量删除 keys 数组中的所有 key。返回一个 Promise 对象。 参数： 名称类型必填描述keysArray是要删除的存储项的 key 数组。callback?(errors: ?Array) => void否回调函数，会收到各 key 对应错误的数组。 示例： React JSXlet keys = ['k1', 'k2'];
AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
multiMerge()​ React JSXstatic multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void)

将指定键集的现有值与新值合并的批处理操作。此方法假定值已序列化为 JSON 字符串。返回一个 Promise 对象。

注意：并非所有原生实现都支持此功能。

参数：

名称	类型	必需	描述
keyValuePairs	Array<Array<string>>	是	待合并项目的键值对数组。
callback?	(errors: ?Array<Error>) => void	否	若发现特定键的错误，将传入包含这些错误的数组并调用此函数。

示例：

// 第一个用户，初始值
let UID234_object = {
  name: 'Chris',
  age: 30,
  traits: {hair: 'brown', eyes: 'brown'},
};

// 第一个用户，增量值
let UID234_delta = {
  age: 31,
  traits: {eyes: 'blue', shoe_size: 10},
};

// 第二个用户，初始值
let UID345_object = {
  name: 'Marge',
  age: 25,
  traits: {hair: 'blonde', eyes: 'blue'},
};

// 第二个用户，增量值
let UID345_delta = {
  age: 26,
  traits: {eyes: 'green', shoe_size: 6},
};

let multi_set_pairs = [
  ['UID234', JSON.stringify(UID234_object)],
  ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
  ['UID234', JSON.stringify(UID234_delta)],
  ['UID345', JSON.stringify(UID345_delta)],
];

AsyncStorage.multiSet(multi_set_pairs, err => {
  AsyncStorage.multiMerge(multi_merge_pairs, err => {
    AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
      stores.map((result, i, store) => {
        let key = store[i][0];
        let val = store[i][1];
        console.log(key, val);
      });
    });
  });
});

// 控制台日志结果:
// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}