react-native-storage
這是一個本地持久存儲的封裝，可以同時支持react-native(AsyncStorage)和瀏覽器(localStorage)。ES6語法，promise異步讀取，使用jest進行了完整的單元測試。
安裝
npm install react-native-storage –save
使用說明
配置
Web開發
對於Web開發你需要使用webpack和babel來支持es6模塊導入功能。
在webpack的配置中添加如下幾行：
// ...
module: {
loaders: [
// ...
{
test: /\.js?$/,
include: [
// path.join(__dirname, '你自己的js文件路徑'),
// path.join(__dirname, 'node_modules/其他需要babel的第三方庫'),
path.join(__dirname, 'node_modules/react-native-storage')
],
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015', 'stage-1', 'react'],
plugins: ['transform-runtime']
}
}
]
}
React Native開發
無需配置直接使用(但要求0.13或更高版本)。
導入
import Storage from 'react-native-storage';請勿使用require('react-native-storage')語法, 否則在react native 0.16之后的版本中會報錯.
初始化
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';
var storage = new Storage({
// 最大容量，默認值1000條數據循環存儲
size: 1000,
// 存儲引擎：對於RN使用AsyncStorage，對於web使用window.localStorage
// 如果不指定則數據只會保存在內存中，重啟后即丟失
storageBackend: AsyncStorage,
// 數據過期時間，默認一整天（1000 * 3600 * 24 毫秒），設為null則永不過期
defaultExpires: 1000 * 3600 * 24,
// 讀寫時在內存中緩存數據。默認啟用。
enableCache: true,
// 如果storage中沒有相應數據，或數據已過期，
// 則會調用相應的sync方法，無縫返回最新數據。
// sync方法的具體說明會在后文提到
// 你可以在構造函數這里就寫好sync的方法
// 或是在任何時候，直接對storage.sync進行賦值修改
// 或是寫到另一個文件里，這里require引入
sync: require('你可以另外寫一個文件專門處理sync')
})
// 最好在全局范圍內創建一個（且只有一個）storage實例，方便直接調用
// 對於web
// window.storage = storage;
// 對於react native
// global.storage = storage;
// 這樣，在此**之后**的任意位置即可以直接調用storage
// 注意：全局變量一定是先聲明，后使用
// 如果你在某處調用storage報錯未定義
// 請檢查global.storage = storage語句是否確實已經執行過了不了解全局變量的使用？請點這里 https://github.com/sunnylqm/react-native-storage/issues/29
保存、讀取和刪除
// 使用key來保存數據（key-only）。這些數據一般是全局獨有的，需要謹慎單獨處理的數據
// 批量數據請使用key和id來保存(key-id)，具體請往后看
// 除非你手動移除，這些數據會被永久保存，而且默認不會過期。
storage.save({
key: 'loginState', // 注意:請不要在key中使用_下划線符號!
data: {
from: 'some other site',
userid: 'some userid',
token: 'some token'
},
// 如果不指定過期時間，則會使用defaultExpires參數
// 如果設為null，則永不過期
expires: 1000 * 3600
});
// 讀取
storage.load({
key: 'loginState',
// autoSync(默認為true)意味着在沒有找到數據或數據過期時自動調用相應的sync方法
autoSync: true,
// syncInBackground(默認為true)意味着如果數據過期，
// 在調用sync方法的同時先返回已經過期的數據。
// 設置為false的話，則等待sync方法提供的最新數據(當然會需要更多時間)。
syncInBackground: true,
// 你還可以給sync方法傳遞額外的參數
syncParams: {
extraFetchOptions: {
// 各種參數
},
someFlag: true,
},
}).then(ret => {
// 如果找到數據，則在then方法中返回
// 注意：這是異步返回的結果（不了解異步請自行搜索學習）
// 你只能在then這個方法內繼續處理ret數據
// 而不能在then以外處理
// 也沒有辦法“變成”同步返回
// 你也可以使用“看似”同步的async/await語法
console.log(ret.userid);
this.setState({ user: ret });
}).catch(err => {
//如果沒有找到數據且沒有sync方法，
//或者有其他異常，則在catch中返回
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
}) // 使用key和id來保存數據，一般是保存同類別（key）的大量數據。
// 所有這些"key-id"數據共有一個保存上限（無論是否相同key）
// 即在初始化storage時傳入的size參數。
// 在默認上限參數下，第1001個數據會覆蓋第1個數據。
// 覆蓋之后，再讀取第1個數據，會返回catch或是相應的sync方法。
var userA = {
name: 'A',
age: 20,
tags: [
'geek',
'nerd',
'otaku'
]
};
storage.save({
key: 'user', // 注意:請不要在key中使用_下划線符號!
id: '1001', // 注意:請不要在id中使用_下划線符號!
data: userA,
expires: 1000 * 60
});
//load 讀取
storage.load({
key: 'user',
id: '1001'
}).then(ret => {
// 如果找到數據，則在then方法中返回
console.log(ret.userid);
}).catch(err => {
// 如果沒有找到數據且沒有sync方法，
// 或者有其他異常，則在catch中返回
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
})
// --------------------------------------------------
// 獲取某個key下的所有id(僅key-id數據)
storage.getIdsForKey('user').then(ids => {
console.log(ids);
});
// 獲取某個key下的所有數據(僅key-id數據)
storage.getAllDataForKey('user').then(users => {
console.log(users);
});
// !! 清除某個key下的所有數據(僅key-id數據)
storage.clearMapForKey('user');
// --------------------------------------------------
// 刪除單個數據
storage.remove({
key: 'lastPage'
});
storage.remove({
key: 'user',
id: '1001'
});
// !! 清空map，移除所有"key-id"數據（但會保留只有key的數據）
storage.clearMap();同步遠程數據（刷新）
storage.sync = {
// sync方法的名字必須和所存數據的key完全相同
// 方法接受的參數為一整個object，所有參數從object中解構取出
// 這里可以使用promise。或是使用普通回調函數，但需要調用resolve或reject。
user(params){
let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;
fetch('user/', {
method: 'GET',
body: 'id=' + id,
...extraFetchOptions,
}).then(response => {
return response.json();
}).then(json => {
//console.log(json);
if(json && json.user){
storage.save({
key: 'user',
id,
data: json.user
});
if (someFlag) {
// 根據syncParams中的額外參數做對應處理
}
// 成功則調用resolve
resolve && resolve(json.user);
}
else{
// 失敗則調用reject
reject && reject(new Error('data parse error'));
}
}).catch(err => {
console.warn(err);
reject && reject(err);
});
}
}有了上面這個sync方法，以后再調用storage.load時，如果本地並沒有存儲相應的user，那么會自動觸發storage.sync.user去遠程取回數據並無縫返回。
storage.load({
key: 'user',
id: '1002'
}).then(...)讀取批量數據
// 使用和load方法一樣的參數讀取批量數據，但是參數是以數組的方式提供。
// 會在需要時分別調用相應的sync方法，最后統一返回一個有序數組。
storage.getBatchData([
{ key: 'loginState' },
{ key: 'checkPoint', syncInBackground: false },
{ key: 'balance' },
{ key: 'user', id: '1009' }
])
.then(results => {
results.forEach( result => {
console.log(result);
})
})
//根據key和一個id數組來讀取批量數據
storage.getBatchDataWithIds({
key: 'user',
ids: ['1001', '1002', '1003']
})
.then( ... )這兩個方法除了參數形式不同，還有個值得注意的差異。getBatchData會在數據缺失時挨個調用不同的sync方法(因為key不同)。但是getBatchDataWithIds卻會把缺失的數據統計起來，將它們的id收集到一個數組中，然后一次傳遞給對應的sync方法(避免挨個查詢導致同時發起大量請求)，所以你需要在服務端實現通過數組來查詢返回，還要注意對應的sync方法的參數處理（因為id參數可能是一個字符串，也可能是一個數組的字符串）。