React Native 之本地存储 AsyncStorage

一、项目背景


最近的项目中,遇到一个问题,用户初次进入一个RN页面,会有一个toast弹框提示,业务的要求是这个toast提示只要展示一次就好了,如果每次用户进来都提示,体验会非常不友好。

经过一番尝试后,了解到了React Native中的提供一个本地存储API-->AsyncStorage。我们给出的解决方案是,用户点击关闭toast弹框后,以后不管是重新登陆还是重新运行程序,这个toast弹框都不再展示。(出得卸载客户端重新安装)

二、AsyncStorage简介


基本概念

AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统,它对于 App 来说是全局性的。可用来代替 LocalStorage。

在 iOS 上,AsyncStorage在原生端的实现是把较小值存放在序列化的字典中,而把较大值写入单独的文件。在 Android 上,AsyncStorage会尝试使用RocksDB,或退而选择 SQLite。

本模块的 JS 代码提供了对原生实现的一个封装,以提供一个更清晰的 JS API、抛出真正的Error对象,以及简单的单项对象操作函数。每个方法都会返回一个Promise对象。

AsyncStorage只能用来储存字符串数据,所以为了去储存object类型的数据,得先进行序列化(JSON.stringify())当你想要使用数据的时候,就可以使用JSON.parse()

常用方法

getItem()
js 复制代码
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)

读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

参数:

名称 类型 必需 说明
key string 要读取的字段名
callback ?(error: ?Error, result: ?string) => void 读取完成后的回调函数(不建议使用)
setItem()
js 复制代码
static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

key字段的值设置成value(注意 value 必须是字符串值,非字符串数据必须先序列化为字符串),并在完成后调用callback函数。如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

参数:

名称 类型 必需 说明
key string 要写入的字段名
value string 要写入key字段的值
callback ?(error: ?Error) => void 发生错误时的回调函数
removeItem()
js 复制代码
static removeItem(key: string, [callback]: ?(error: ?Error) => void)

删除一个字段。返回一个Promise对象。

参数:

名称 类型 必需 说明
key string 要删除的字段名。
callback ?(error: ?Error) => void 发生错误时的回调函数

三、使用


导入AsyncStorage

js 复制代码
import { AsyncStorage } from 'react-native';//新版本的RN已经将AsyncStorage移除了,建议使用下面方法引入

import AsyncStorage from '@react-native-async-storage/async-storage'

代码示例

js 复制代码
import AsyncStorage from '@react-native-async-storage/async-storage'

export default class A extends Component{
    constructor(props){
        super(props);
        this.state = {
            tipsVisible: true //是否显示toast弹框标志,默认true,第一次进入显示
        }
    }
    
    componentDidmount(){
        //每次进入页面都要获取AsyncStorage中存储的tips值,如果为1,代表用户手动关闭了弹框,以后不再展示,将tipsVisible赋值为false
        AsyncStorage.getItem('tip').then(res =>{
            console.log(res, 'res')
            this.setState({
                tipsVisible: res === '1' ? false : true
            })
        })
    }
    
    //点击toast弹框方法
    hanldeHideTips(){
        this.setState({
            tipsVisible: false //关闭弹框
        })
        AsyncStorage.setItem('tips', '1') // 给AsyncStorage中tips赋值为1
    }
    
    render(){
        return(
            <View>
                {this.state.tipsVisible ? (<TouchableOpacity onPress={this.hanldeHideTips()}>
                    <Label text={'关闭'} />
                </TouchableOpacity> ) : null
                }
            </View>
        )
    }
} 
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1117 小时前
css实现div被图片撑开
前端·css