AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。这是官网上对它的介绍。可以知道,这个asyncstorage也是以键值对的形式进行存储数据的。

1、封装DeviceStorage类

import {
AsyncStorage
}from 'react-native';
export default class DeviceStorage{
static get(key) {
return AsyncStorage.getItem(key).then((value) => {
const jsonValue = JSON.parse(value);
return jsonValue;
});
}
static save(key, value) {
return AsyncStorage.setItem(key, JSON.stringify(value));
}
static update(key, value) {
return DeviceStorage.get(key).then((item) => {
value = typeof value === 'string' ? value : Object.assign({}, item, value);
return AsyncStorage.setItem(key, JSON.stringify(value));
});
}
static delete(key) {
return AsyncStorage.removeItem(key);
}
}

  在其他组件中引用DeviceStorage类。

import DeviceStorage from './DeviceStorage';

2、保存

DeviceStorage.save("tel","18911112222");

3、获取

DeviceStorage.get('tel').then((tel)=>{
if(tel == null || tel == ''){ } else {
this.setState({
tel:tel,
});
}
})

4、更新

DeviceStorage.update("tel","17622223333");

5、删除

DeviceStorage.delete("tel");

案例二:

  本案例中使用react-native-easy-toast进行简易弹窗提示。首先在项目中进行加载组件并引用;

1.在终端运行 npm i react-native-easy-toast --save
2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-easy-toast'
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
TextInput,
AsyncStorage,
Text
} from 'react-native';
import Toast,{DURATION} from 'react-native-easy-toast'; //引入Toast控件
//AsyncStorage是以键值对的形式保存数据 ,诸如安卓中SharedPreferences一样
const AS_KEY = "as_key";
export default class AsyncStoreDemo extends Component {
constructor(props) {
super(props);
} //保存数据
asSave() {
AsyncStorage.setItem(AS_KEY, this.text, (error) => {
if (!error) {
this.toast.show('保存数据成功', DURATION.LENGTH_SHORT);
} else {
this.toast.show('保存数据失败', DURATION.LENGTH_SHORT);
}
});
} //查询保存的数据
asQuery() {
AsyncStorage.getItem(AS_KEY, (error, result) => {
if (!error) {
if (result !== '' && result !== null) {
this.toast.show('查询到的内容是:' + result, DURATION.LENGTH_SHORT);
} else {
this.toast.show('未找到指定保存的内容!', DURATION.LENGTH_SHORT);
}
} else {
this.toast.show('查询数据失败', DURATION.LENGTH_SHORT);
}
});
} //删除已经保存的数据
asDelete() {
AsyncStorage.removeItem(AS_KEY, (error) => {
if (!error) {
this.toast.show('删除数据成功', DURATION.LENGTH_SHORT);
} else {
this.toast.show('删除数据失败', DURATION.LENGTH_SHORT);
}
});
} render() {
return (<View style={styles.container}>
<TextInput style={styles.edit}
//文字内容发生改变调用方法
onChangeText={text=>this.text=text}/>
<View style={styles.child}>
<Text style={styles.text}
onPress={()=>{
this.asSave()
}}>保存</Text>
<Text style={styles.text}
onPress={()=>{
this.asQuery()
}}>查询</Text>
<Text style={styles.text} onPress={()=>{
this.asDelete()
}}>删除</Text>
</View>
<Toast ref={toast=>{
this.toast=toast
}}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:60,
backgroundColor:'#e8e8e8'
},
child: {
flexDirection: 'row'
},
edit: {
fontSize: 20,
borderWidth: 1,
borderColor: '#d1d1d1',
margin: 10,
paddingLeft: 5,
height: 45,
borderRadius:3
},
text: {
fontSize: 20,
color: '#333',
marginLeft: 15
}
});

案例三:react-native-storage

  React Native中Storage使用详解和封装

  在移动端开发中,数据库存储肯定是避免不了的需求,在iOS中,我们也经常使用NSUserDefault单利类来存储一些简单的用户信息等数据,在web开发中我们经常使用LocalStorage来存储简单数据,在React Native中,我们可以选择直接使用官方推荐的数据存储组件AsyncStorage组件,但是有时候使用起来还是不够简单,功能不够多,这时我们就会选择封装一个storage,我们选择使用三方的react-native-storage来进一步封装

  react-native-storage 官方文档

https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md

  网上大佬提供封装好的storage组件Demo示例

https://github.com/guangqiang-liu/react-native-storage-Demo

安装react-native-storage组件

  • npm install react-native-storage --save
  • import Storage from 'react-native-storage'
  • import { AsyncStorage } from 'react-native'
  • import {sync} from './sync'

参考文档:React Native中Storage使用详解和封装>>>

React Native之持久化存储(AsyncStorage、react-native-storage)的使用的更多相关文章

  1. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  2. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  3. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  4. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  5. weblogic.nodemanager.common.ConfigException: Native version is enabled but nodemanager native library could not be loaded 解决办法

    近日在一个原本工作正常的weblogic web server(操作系统为redhat 64位系统)上折腾安装redis/hadoop等东东,yum install了一堆第3方类库后,重启weblog ...

  6. IOS开发-本地持久化存储sqlite应用

    前言 需求描述 开发测试环境 FMDB介绍 创建工程 一.前言 上一章介绍了如何开发一个IOS应用的入门案例教程:                     我的第一个IOS开发应用    本章主要将介 ...

  7. iOS数据持久化存储:归档

    在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...

  8. ios开发之数据的持久化存储机制

    IOS中数据的持久化保存这块内容,类似于Android中文件的几种常见的存储方式. 对于数据的持久化存储,ios中一般提供了4种不同的机制. 1.属性列表 2.对象归档 3.数据库存储(SQLite3 ...

  9. iOS开发——数据持久化Swift篇&使用Core Data进行数据持久化存储

    使用Core Data进行数据持久化存储   一,Core Data介绍 1,Core Data是iOS5之后才出现的一个数据持久化存储框架,它提供了对象-关系映射(ORM)的功能,即能够将对象转化成 ...

随机推荐

  1. VC++ Debug格式化数值显示

    When you watch variables in the Watch or Quick Watch window, the values are displayed using the defa ...

  2. VC++ 给你的代码强制加一个硬断点

    类似与Javascript的 debugger; Hard code a debugger breakpoint If you need to insert a hard breakpoint in ...

  3. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

  4. Python实现生命游戏

    1. 生命游戏是什么 生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机.它包括一个二维矩形世界,这个世界中的每个方格居住着一个活着的或死了的细胞.一个细胞在下一个时刻生死取决于相邻八个 ...

  5. 3 CActiveXUI的一个Bug

    如果主窗口直接用变量生成,则关闭窗口时会产生崩溃            如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口都用new生成,_tWinMain改为下面这样: i ...

  6. Android WebView 加载网页

    通过Android 中 WebView 控件加载HTML5 页面,这是实现Android 混合开发的基础. 选择加载的网页可以是本地,也可用使远程的.需要添加访问互联网的权限:<uses-per ...

  7. 2015-03-18——mongodb的简单配置

    参考网址:http://www.cnblogs.com/mecity/archive/2011/06/11/2078527.html#3060056 mongod 数据库启动程序 mongo 数据库操 ...

  8. log4j 日志相关

    1.log 打印异常信息 Logger logger = Logger.getLogger(LoggerTest.class);  //追踪产生此日志的类 Logger extends Categor ...

  9. 借鉴+总结!! mysql 客户端命令行下 查询数据并生成文件导出

    方式1:在mysql命令行环境下执行: sql语句+INTO OUTFILE +文件路径/文件名 +编码方式(可选)  例如: select * from user  INTO OUTFILE  '/ ...

  10. 再谈Redis应用场景(转)

    原文:在谈Redis应用场景 一.MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样 ...