react native本地存储

什么是本地存储?

本地储存的意义:将数据存储在设备中,在需要数据的时候调用,数据不会因为应用的退出或者网络的断开而无法获取。

在react native中本地存储的方式有两种:

    一种是AsyncStorage:
    AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的。类似于iOS中的NSUserDefault。
        应用场景:如果用户的信息量不大,仅仅需要存储几个用户的配置信息,就用AsyncStorage;
    另一种是Realm:
        新的移动端数据库王者,性能比单独无封装的SQLite还要快;
        应用场景:用户的信息量比较大的情况下;


下面简单的介绍以下AsyncStorage:
`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)`

原文地址:http://blog.51cto.com/13955864/2173335

时间: 2024-10-17 08:07:58

react native本地存储的相关文章

《React Native》之程序调试篇

??代码调试,在程序开发的过程中尤为重要,能协助开发者快速定位问题. ??此文重点介绍React Native开发的程序调试工具及过程. ??呼出Developer Menu对话框,如下图所示: Android物理设备或者IOS物理设备 : 摇晃手机呼出. Android模拟器:Command? + M IOS模拟器:Command? + D 开发者菜单在release(生成环境)不会被呼出. 程序调试我们分成三类: 内容预览,调试效果 Bug查找,断点调试 性能分析 内容预览,调试效果 ??当

【React Native开发】React Native控件之WebView组件详解以及实例使用(22)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

React Native学习(1):怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.

React Native学习方法论

这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.翻开市面上那些21天精通某某语言之

React Native组件的结构和生命周期

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出

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-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 https://github.com/jpush/jpush-react-native react-native-jpush 由 React Native 中文网开发维护. https://github.com/reactnativecn/react-native-jpush pouchdb-re