21.react native 使用AsyncStorage 存储搜索历史记录

目录

 

1.通过AsyncStorage和react-native-storage封装存储管理类

2.实现搜索记录存储、查询、清除

2.1查询

2.2存储

2.3清除

2.4历史记录效果图

3.示例源码

---

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()将数组转为字符串；