React Native 之 通过AsyncStorage 实现数据持久化操作

前端之家收集整理的这篇文章主要介绍了React Native 之 通过AsyncStorage 实现数据持久化操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * @flow
  5. */
  6.  
  7. import React,{ Component } from 'react';
  8. import {
  9. AppRegistry,StyleSheet,AsyncStorage,Image,Text,TouchableHighlight,TextInput,StatusBar,View
  10. } from 'react-native';
  11.  
  12. import AutoExpandingTextInput from './AutoExpandingTextInput';
  13.  
  14. import constantData from './data/SimpleSample.json';
  15. let newJSONString = JSON.stringify(constantData);
  16. let array = new Array;
  17. export default class ViewProject extends Component {
  18.  
  19. _doSomething(error){
  20. if(error!=null){
  21. console.log("--doSomething error messge:"+error.messge);
  22. return;
  23. }
  24. //执行成功的操作
  25. console.log("--doSomething-success----");
  26. }
  27. //这里 对数据的操作都分别用回调方法与 Promise机制后继处理的方法 来实现
  28. //1.写入数据
  29. //1.1 回调方法
  30. _setData(key,value){
  31. AsyncStorage.setItem(key,value,this._doSomething);
  32. }
  33. //1.2 通过Promise机制后继处理的方法
  34. _setDataPromise(key,value){
  35. AsyncStorage.setItem(key,value).then(
  36. ()=>{
  37. console.log("write one success");
  38. }
  39. ).catch(
  40. (error)=>{
  41. console.log("write one error");
  42. }
  43. );
  44. }
  45. //1.3 一次写入多组数据 回调方法
  46. _SetMultiData(array){
  47. AsyncStorage.multiSet(array,this._doSomething)
  48. }
  49. //1.4 一次写入多组数据 Promise机制后继处理的方法
  50. _setMultiDataPromise(array){
  51. AsyncStorage.multiSet(array).then(
  52. ()=>{
  53. console.log(">>write multi success"); //保存成功的操作
  54. }
  55. ).catch(
  56. (error)=>{
  57. console.log(">>write multi error:"+error.message); //保存失败的操作
  58. }
  59. );
  60. }
  61.  
  62. //2. 读取数据
  63.  
  64. //2.1 回调方法方式读取
  65. _getData(key){
  66. AsyncStorage.getItem(key,this._handleResult);
  67. }
  68. _handleResult(error,result){
  69. if(error!=null){
  70. console.log("error message:"+error.message);
  71. //读取失败的操作
  72. return;
  73. }
  74. if(result===null){
  75. console.log("--null--"); // 存储中没有指定键对应的值,处理这种情况
  76. return;
  77. }
  78. console.log("--reade success -result--"+result);
  79. }
  80. _handleAllKeys(error,keys){
  81. if(error != null){
  82. console.log("dataLoaded error:"+error.message);
  83. return;
  84. }else{
  85. console.log("get all key error is null");
  86. let allKeyLen = keys.length;
  87. for (let counter=0; counter<allKeyLen;counter++) {
  88. console.log("key"+counter+":"+keys[counter]);
  89. AsyncStorage.getItem(keys[counter]).then(
  90. (result)=>{
  91. console.log("key"+keys[counter]+" getItem data:"+result);
  92. }
  93. ).catch(
  94. (error)=>{
  95. console.log("error message:"+error.message);
  96. //读取失败的操作
  97. return;
  98. }
  99. );
  100. }
  101. }
  102.  
  103. }
  104.  
  105. //2.2 Promise机制后继处理的方法
  106. _getDataPromise(key){
  107. AsyncStorage.getItem(key).then(
  108. (result)=>{
  109. if(result===null){
  110. console.log("--null--"); // 存储中没有指定键对应的值,处理这种情况
  111. return;
  112. }else if(result!=null){
  113. console.log("--success--result="+result);//读取成功的操作
  114. }
  115.  
  116. }
  117.  
  118. ).catch(
  119. (error)=>{
  120. console.log("---reade error:"+error.message);
  121. }
  122. );
  123. }
  124. //获取所有数据 回调方法
  125. _getAllKeys(){
  126. AsyncStorage.getAllKeys(this._handleAllKeys);
  127. }
  128. //获取所有数据 Promise机制后继处理的方法
  129. _getAllKeysPromise(){
  130. AsyncStorage.getAllKeys().then(
  131. (keys)=>{
  132. let allKeyLen = keys.length;
  133. for (let counter=0; counter<allKeyLen;counter++) {
  134. console.log(">>key"+counter+":"+keys[counter]);
  135. AsyncStorage.getItem(keys[counter]).then(
  136. (result)=>{
  137. console.log(">>key"+keys[counter]+" getItem data:"+result);
  138. }
  139. ).catch(
  140. (error)=>{
  141. console.log("error message:"+error.message);
  142. //读取失败的操作
  143. return;
  144. }
  145. );
  146. }
  147. }
  148. ).catch(
  149. (error)=>{
  150. console.log("error message:"+error.message);
  151. //读取失败的操作
  152. return;
  153. }
  154. );
  155. }
  156.  
  157. //3 删除数据
  158. //3.1 删除单个数据 回调方法
  159. _delete(key){
  160. AsyncStorage.removeItem(key,this._doSomething);
  161. }
  162. //3.2 删除单个数据 Promise 机制后继处理方式
  163. _deletePromise(key){
  164. AsyncStorage.removeItem(key).then(
  165. ()=>{
  166. //删除成功后的操作
  167. console.log("success delete");
  168. }
  169. ).catch(
  170. (error)=>{
  171. //处理异常操作
  172. console.log("error:"+error.message);
  173. }
  174. );
  175. }
  176.  
  177. //3.3 回调方式删除多个数据
  178. _multiRemove(array){
  179. AsyncStorage.multiRemove(array,this._doSomething);
  180. }
  181. //3.4 删除多个数据 Promise 机制后继处理方式
  182. _multiRemovePromise(array){
  183. AsyncStorage.multiRemove(array).then(
  184. //操作成功处理
  185. ()=>{
  186. console.log("--删除成功--");
  187. }
  188. ).catch(
  189. (error)=>{
  190. console.log("--删除失败--");
  191. }
  192. );
  193. }
  194. //3.5 删除所有数据 回调方式
  195. _clear(){
  196. AsyncStorage.clear(this._doSomething);
  197. }
  198. //3.6 删除所有数据 Promise 机制后继处理方式
  199. _clearPromise(){
  200. AsyncStorage.clear().then(
  201. ()=>{
  202. //删除成功的操作
  203. console.log("--删除成功--");
  204. }
  205. ).catch(
  206. (error)=>{
  207. console.log("--删除失败--error:"+error.message);
  208. }
  209. );
  210. }
  211.  
  212. //4. JSON 数据的保存于读取
  213. //4.1 回调方式保存json格式数据
  214. _saveJSON(key,jsonString){
  215. AsyncStorage.setItem(key,jsonString,this._doSomething);
  216. }
  217. //4.2 保存json格式数据 Promise 机制后继处理方式
  218. _saveJSONPromise(key,jsonString){
  219. AsyncStorage.setItem(key,jsonString).then(
  220. ()=>{
  221. console.log("write json success");
  222. }
  223. ).catch(
  224. (error)=>{
  225. console.log("write json error:"+error.message);
  226. }
  227. );
  228. }
  229. //4.3 回调方式 读取json数据
  230. _getJSON(key){
  231. AsyncStorage.getItem(key,this._handleResultJSON);
  232. }
  233. //4.3 读取json数据 Promise 机制后继处理方式
  234. _getJSONPromise(key){
  235. AsyncStorage.getItem(key).then(
  236. (result)=>{
  237. if(result===null){
  238. console.log("-json data-null--"); // 存储中没有指定键对应的值,处理这种情况
  239. return;
  240. }else if(result!=null){
  241. console.log("-json-success-result="+result);//读取成功的操作
  242. }
  243.  
  244. }
  245. ).catch(
  246. (error)=>{
  247. console.log("---error="+e.message);//读取成功的操作
  248. }
  249. );
  250. }
  251.  
  252. _handleResultJSON(error,result){
  253. if(error!=null){
  254. console.log("json error message:"+error.message);
  255. //读取失败的操作
  256. return;
  257. }
  258. if(result===null){
  259. console.log("-json-null--"); // 存储中没有指定键对应的值,处理这种情况
  260. return;
  261. }
  262.  
  263. // let anotherData = JSON.parse(result); //将字符串转换为JSON对象
  264. console.log("--reade json success -result--"+ result);
  265. }
  266. _onChangeText(newText) {
  267. console.log('inputed text:' + newText);
  268. // this._setData("1","ni hao");
  269. // this._setDataPromise("2","ni bu hao");
  270. // this._SetMultiData([["3","003"],["4","004"]]);
  271. // this._setMultiDataPromise([["5","005"],["6","006"]]);
  272.  
  273. // this._getData("1");
  274. // this._getDataPromise("2");
  275. // this._getAllKeys();
  276. // this._getAllKeysPromise();
  277.  
  278. // this._delete("1");
  279. // this._deletePromise("2");
  280. // this._multiRemovePromise(["3","4"]);
  281. // this._multiRemove(["5","6"]);
  282. // this._clear();
  283. // this._clearPromise();
  284.  
  285. // this._saveJSONPromise("json",newJSONString);
  286. // this._getJSONPromise("json");
  287.  
  288. // this._saveJSON("json1",newJSONString);
  289. // this._getJSON("json1");
  290. // this._getAllKeysPromise();
  291. }
  292.  
  293. render() {
  294. return (
  295. <View style={styles.container}>
  296. <AutoExpandingTextInput
  297. onChangeText={(newText)=>{this._onChangeText(newText)}}
  298. />
  299. </View>
  300. );
  301. }
  302.  
  303.  
  304. }
  305.  
  306.  
  307.  
  308. const styles = StyleSheet.create({
  309. container: {
  310. flex:1,justifyContent: 'center',alignItems: 'center',backgroundColor:'#F5FCFF'
  311. }
  312. });
  313. AppRegistry.registerComponent('ViewProject',() => ViewProject);

猜你在找的React相关文章