React Native AsyncStorage本地存储工具类

 更新时间:2017年10月24日 16:58:59   作者:七月_代码君  
这篇文章主要为大家分享了React Native AsyncStorage本地存储工具类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

利用react-native组件AsyncStorage,通过promise,保存本地数据,具体内容如下

import {AsyncStorage} from 'react-native';

export default class StorageUtil {

  /**
   * 保存一个Json对象
   * @param key
   * @param value
   * @param callback
   */
  static async saveJsonObject(key, value) {
    return await this.saveString(key, JSON.stringify(value));
  }


  /**
   * 获取一个Json对象
   * @param key
   * @param defaultObject
   */
  static async getJsonObject(key, defaultObject) {
    let result=null;
    try{
      result=await this.getString(key,null);
      result=await JSON.parse(result);
    }catch (err){
      if(defaultObject){
        return Promise.resolve(defaultObject);
      }else{
        return Promise.reject(err);
      }
    }
    return result;

  }


  /**
   * 保存一个值
   * @param key
   * @param value
   */
  static async saveString(key, value) {
    if (key != null && value != null) {
      //Key 与Value 都不为空
      try {
         await AsyncStorage.setItem(key, value)
      } catch (err) {
        return Promise.reject(err)
      }
      return Promise.resolve(true);
    } else {
      return Promise.reject({"msg": "Key and value can not be null"});
    }
  }

  /**
   * 获取一个值
   * @param key
   * @param defaultValue
   */
  static async getString(key, defaultValue) {
    let result = null;
    let noDataError = {"msg": "No value found !"};
    if (key != null) {
      result = await AsyncStorage.getItem(key);
      // console.log('get string result',result,defaultValue);
      return result ? result : defaultValue!=null ? defaultValue : Promise.reject(noDataError);
    } else {
      if (defaultValue) {
        return Promise.resolve(defaultValue);
      } else {
        return Promise.reject(noDataError);
      }
    }

  }


  /**
   * 移除一个值
   * @param key
   */
  static async remove(key) {
    let result = true;
    try {
      result = await AsyncStorage.removeItem(key);
    } catch (err) {
      return Promise.reject(err)
    }
    return result;
  }


  /**
   * 获取所有已存储
   */
  static async getAllKeys() {
    let result=true;
    try {
      result = await AsyncStorage.getAllKeys();
    } catch (err) {
      return Promise.reject(err)
    }
    return result;
  }

}

外界调用

保存

StorageUtil.saveJsonObject(KEY_LOCAL_USER_INFO, user);

读取

StorageUtil.getJsonObject(KEY_LOCAL_USER_INFO).then(data=>{console.log(data))}

清除

StorageUtil.remove(KEY_LOCAL_USER_INFO)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React 条件判断实例详解

    React 条件判断实例详解

    在 React 中,可以通过 JavaScript 的条件语句来动态渲染组件或元素,下面给大家分享几种常用的在 React 中处理条件渲染的方法,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • react项目使用redux初始化方式

    react项目使用redux初始化方式

    这篇文章主要介绍了react项目使用redux初始化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 浅谈react.js中实现tab吸顶效果的问题

    浅谈react.js中实现tab吸顶效果的问题

    下面小编就为大家带来一篇浅谈react.js中实现tab吸顶效果的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React中使用ResizeObserver来观察元素size变化的方法

    React中使用ResizeObserver来观察元素size变化的方法

    在 React 中使用 ResizeObserver 来观察元素的大小变化,可以通过创建一个自定义 Hook 来封装 ResizeObserver 的逻辑,并在组件中使用这个 Hook,以下是一个完整的示例,展示了如何在 React 中使用 ResizeObserver 来观察元素的大小变化,需要的朋友可以参考下
    2024-12-12
  • React+Typescript项目环境搭建并使用redux环境的详细过程

    React+Typescript项目环境搭建并使用redux环境的详细过程

    这篇文章主要介绍了React+Typescript项目环境搭建并使用redux环境的详细过程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • react进阶教程之异常处理机制error Boundaries

    react进阶教程之异常处理机制error Boundaries

    在react中一旦出错,如果每个组件去处理出错情况则比较麻烦,下面这篇文章主要给大家介绍了关于react进阶教程之异常处理机制error Boundaries的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • React.js入门实例教程之创建hello world 的5种方式

    React.js入门实例教程之创建hello world 的5种方式

    React 是近期非常热门的一个前端开发框架。应用非常广泛,接下来通过本文给大家介绍React.js入门实例教程之创建hello world 的5种方式 ,需要的朋友参考下吧
    2016-05-05
  • 通过实例学习React中事件节流防抖

    通过实例学习React中事件节流防抖

    这篇文章主要介绍了通过实例学习React中事件节流防抖,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • React通过useContext特性实现组件数据传递

    React通过useContext特性实现组件数据传递

    本文主要介绍了React如何通过useContext特性实现组件数据传递,文中有相关的代码示例供大家参考,对我们学习React有一定的帮助,需要的朋友可以参考下
    2023-06-06
  • React Native基础入门之调试React Native应用的一小步

    React Native基础入门之调试React Native应用的一小步

    这篇文章主要给大家介绍了关于React Native基础入门之调试React Native应用的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07

最新评论