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>
        )
    }
} 
相关推荐
Myli_ing20 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风23 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟32 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript