目录
1.通过AsyncStorage和react-native-storage封装存储管理类
1.通过AsyncStorage和react-native-storage封装存储管理类
/**
* 数据
*/
import { AsyncStorage } from 'react-native';
import Storage from 'react-native-storage';
let storage = new Storage({
//最大容量,默认值1000条数据循环存储
size: 1000,
//存储引擎:RN使用AsyncStorage
//如果不指定则数据只会保存在内存中,重启后即丢失
storageBackend: AsyncStorage,
defaultExpires: null,
enableCache: true,
});
//导出`storage`
exports.storage = storage;
import {storage} from "./Storage";
export default class StorageOpt{
/**
key:保存的key值
object:保存的value
expires:有效时间,
*/
static save(key,object,expires){
storage.save({
key: key, // 注意:请不要在key中使用_下划线符号!
data: object,
// 如果不指定过期时间,则会使用defaultExpires参数
// 如果设为null,则永不过期
expires: expires
});
}
/**
* 删除指定key的值
* @param key
*/
static delete(key){
// 删除单个数据
storage.remove({
key: key
});
}
/**
* 通过key加载数据
*/
static loadDefault(key,callBack){
StorageOpt.load(key, null, null, callBack);
}
/**
* 通过key加载数据
*/
static load(key,params,someFlag,callBack){
storage.load({
key: key,
// autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
autoSync: true,
// syncInBackground(默认为true)意味着如果数据过期,
// 在调用sync方法的同时先返回已经过期的数据。
// 设置为false的话,则始终强制返回sync方法提供的最新数据(当然会需要更多等待时间)。
syncInBackground: true,
// 你还可以给sync方法传递额外的参数
syncParams:{ params,
someFlag: someFlag,
},
}).then(ret => {
callBack(ret);
return ret;
}).catch(err => {
//如果没有找到数据且没有sync方法,
//或者有其他异常,则在catch中返回
// console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
//没找到数据返回空
callBack('');
});
}
}
2.实现搜索记录存储、查询、清除
实现搜索记录存储,当用户点击点击输入框获取焦点时显示搜索历史,定义搜索历史存储显示数据
this.state={
searchHistory:[], //存储要显示显示搜索历史记录
searchVal: '',// 存放用户输入搜索文字
userEditing:false, //用户编辑搜索内容,用户是否处于输入状态
dataSource:[] //显示数据(搜索结果)
}
2.1查询
页面启动时加载历史记录,通过JSON.parse()将字符串转为数组,存储数据时会通过JSON.stringify()将数组转为字符串
componentDidMount() {
//加载历史记录
StorageOpt.loadDefault(Constants.searchHistory, function(data) {
if(data !== undefined && data.length>0){
_this.setState({
searchHistory:JSON.parse(data)
});
}
})
}
2.2存储
JSON.stringify()将数组转为字符串;