对react native 的AsyncStorage 进行小型封装

/** * @overview A minimalistic wrapper around React Native‘s AsyncStorage. * @license MIT */import { AsyncStorage } from ‘react-native‘;import merge from ‘lodash‘;

const store = {    /**     * Get a one or more value for a key or array of keys from AsyncStorage     * @param {String|Array} key A key or array of keys     * @return {Promise}     */    get(key) {        if(!Array.isArray(key)) {            return AsyncStorage.getItem(key).then(value => {                return JSON.parse(value);            });        } else {            return AsyncStorage.multiGet(key).then(values => {                return values.map(value => {                    return JSON.parse(value[1]);                });            });        }    },

/**     * Save a key value pair or a series of key value pairs to AsyncStorage.     * @param  {String|Array} key The key or an array of key/value pairs     * @param  {Any} value The value to save     * @return {Promise}     */    save(key, value) {        if(!Array.isArray(key)) {            return AsyncStorage.setItem(key, JSON.stringify(value));        } else {            var pairs = key.map(function(pair) {                return [pair[0], JSON.stringify(pair[1])];            });            return AsyncStorage.multiSet(pairs);        }    },

/**     * Updates the value in the store for a given key in AsyncStorage. If the value is a string it will be replaced. If the value is an object it will be deep merged.     * @param  {String} key The key     * @param  {Value} value The value to update with     * @return {Promise}     */    update(key, value) {        return store.get(key).then(item => {            value = typeof value === ‘string‘ ? value : merge({}, item, value);            return AsyncStorage.setItem(key, JSON.stringify(value));        });    },

/**     * Delete the value for a given key in AsyncStorage.     * @param  {String|Array} key The key or an array of keys to be deleted     * @return {Promise}     */    delete(key) {        if (Array.isArray(key)) {            return AsyncStorage.multiRemove(key);        } else {            return AsyncStorage.removeItem(key);        }    },

/**     * Get all keys in AsyncStorage.     * @return {Promise} A promise which when it resolves gets passed the saved keys in AsyncStorage.     */    keys() {        return AsyncStorage.getAllKeys();    }};

export default store ;

然后你需要的地方import store  进来就好了。

使用方法 store.save(key,value).then(()=>{store.get(key)}).then(()=>{store.delete(key)}).catch(error()=>{console.log(error)})

注意在调用时请使用 ansyc await
时间: 2024-11-10 23:06:16

对react native 的AsyncStorage 进行小型封装的相关文章

React Native使用AsyncStorage本地持久化

AsyncStorage AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的.类似于iOS中的NSUserDefault. 存值: import { AppRegistry, StyleSheet, Text, View, AsyncStorage } from 'react-native'; try { AsyncStorage.setItem( 'key', 'shaoting', (error)=>{ if (error){ alert('存值失败:'

React Native专题-江清清

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

React Native专题

刚创建的React Native技术交流1群(282693535),React Native技术交流2群(496601483),React Native技术交流3群(496508742).欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装

React Native状态机和应用设计思路

在原生Android开发中:当用户点击"登录"按钮时,从用户名输入框中读取用户输入的用户名,从密码输入框中读取用户输入的密码,然后交给注册模块去处理.但是,React Native不是这样的思维. 一.状态机 1.1 状态机思维 React框架将所有的UI视为一个简单的状态机,那么任意一个UI场景就是状态机的一种状态.根据决定状态的状态机变量的值,React框架渲染状态机的当前状态--对于开发者来说,单个UI场景就被渲染出来了.随着状态机变量值的改变,UI状态机也在不停地改变状态,UI

[]H5、React Native、Native应用对比分析

目录(?)[-] 一React Native的出现 二3款应用效果 三工程方案 四对比分析 开发方式 性能 体验 更新 维护 开发方式 性能 体验 更新 维护 五综合 开发方式 性能 体验 更新 维护 @王利华,vczero “存 在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移动市场的迅速崛起强调团队快速响应和迭代:三则是用户的体验被放大,用户要求

React Native 调研报告

Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"learn once, write everywhere",而web开发者兴奋的估计是,不需要学习iOS那陌生的OC或者swift语言,用自己熟悉的javascript语言就可以开发原生的移动APP了.那么新推出的react native 能否承载的了两大阵营的开发者的期待了.本人及同事对react n

React Native的生命周期解析

在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件.构造整个组件树的过程. 上张图涵盖了一个组件从创建.运行到销毁的整个过程.大家可以看到,初始化的时候会调用5个函数(按先后顺序).这5个函数在整个组件被创建到销毁的过程中只调用一次.初始化完毕后,当组件的props或者state改变都会触发不同的钩子函数,继而引发组件的重新渲染.现在我们把这过程拆开一点一点来分析. 初始化 我们先来看初始化,在初始化的过程中,会按顺序调用下面5个函

React Native快速开发 厕所在哪App LBS定位 框架封装

课程目录:第1章 课程大纲和App演示介绍整个课程的内容.业务架构.技术选型以及App的功能演示.第2章 Node.js服务开发介绍了Node.js环境搭建.JSON数据文件的读取以及开发了基础的服务接口.该接口主要提供客户端(含Native端和PC web端)调用,用于数据展示和数据存储.第3章 Node.js开发后台系统讲解了通过调用第二章的接口,开发简易的后台CMS系统.该CMS系统主要用于配置页面数据和存储列表数据.第4章 React Native环境搭建和入门主要讲解React Nat