native数据类型 react_React-Native中的数据持久化方式

react-native.jpeg

因为之前是做iOS开发的，没使用过安卓的存储方式，所以本文章只写利用JS来实现的方法。

文章中如果有不清楚或者不对的地方，欢迎再评论区留言或者私信给我或者加QQ群397885169讨论。

1.AsyncStorage

AsyncStorage是react-native官方提供的数据存储方式，采用键值对存储的方式，通过key=>value对应来存取数据，需要注意的是AsyncStorage中只能存储字符串，如果想要存储对象(objec)、数组(array)或者其他类型，需要转换成字符串才可以。

数据存储

// 单数据存储

// 键

let key = 'myKey';

// 值(正确的，字符串)

let valueString = 'myValue';

// 数据存储

// key : string, (字符串型的键)

// value: string, (字符串型的值)

// error: Error, (错误信息)

AsyncStorage.setItem(key,valueString,(error)=>{

if (error){

console.log('存储失败' + error);

}else {

console.log('存储成功');

}

})

// 值(错误的，对象)

let valueObject = {'one':'1','two':'2'};

// 值(错误的，数组)

let valueArray = ['one','two'];

// 如果需要存储对象类型或者数组类型的值，需要将其转换成字符型，然后再进行键值存储。

// 转换对象

valueObject = JSON.stringify(valueObject);

// 转换数组

valueArray = JSON.stringify(valueArray);

// 多数据存储

// 键

let key = 'myKey';

let multKey = [['one','1'],['two','2']];

let multValue = ['1','2'];

AsyncStorage.multiSet(multKey,(error)=>{

if (error){

console.log('存储失败' + error);

}else {

console.log('存储成功');

}

})

数据获取

// 单数据获取

// 键

let key = 'myKey';

// 数据读取

// key : string, (字符串型的键)

// Error : Error, (Error信息，判断这个参数并不能确定是否错误)

// result: string, (正确的返回信息，通过判断它，才能知道返回信息是否正确)

AsyncStorage.getItem(key,(Error,result)=>{

if (result === null){

console.log('获取失败' + result);

}else {

console.log('获取成功' + result);

// 这里返回的才是正确参数。

// 如果返回的是转换过的对象类型或者数组类型，需要再次转换。

console.log(JSON.parse(result));

}

})

// 多数据获取

// key需要和存储的key对应。

let multKey = ['one','two'];

AsyncStorage.multiGet(multKey,(Error,result)=>{

if (result===null){

console.log('获取失败' + result);

}else {

console.log('获取成功' + result);

}

})

// 全部获取

AsyncStorage.getAllKeys((error,result)=>{

if (result===null){

console.log('获取失败' + result);

}else {

console.log('获取成功' + result);

}

});

数据删除

// 删除单个数据可以通过removeItem

// 要删除的key

let key = 'myKey';

AsyncStorage.removeItem(key);

// 删除多个数据可以使用multiRemove

// 要删除的key数组

let keyArr = ['one','two'];

AsyncStorage.multiRemove(keyArr);

// 删除所有数据

AsyncStorage.clear();

2.react-native-storage

这个是react-native中文网封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)的数据存于方式，使用ES6语法。

官方提供的文档很清晰，可以跳转到github(react-native-storage)上查看，如果使用中遇到问题，可以在下方评论或者私信给我

3.react-native-sqlite

如果在之前的开发中使用过其他语言的数据库，就会知道sqlite虽然是一个很强大，很轻量的数据库，但对于其严格的语法，复杂的语句，所以我很推荐最后一个数据库来替代react-native-sqlite

sqlite.open("filename.sqlite", function (error, database) {

if (error) {

console.log("Failed to open database:", error);

return;

}

var sql = "SELECT a, b FROM table WHERE field=? AND otherfield=?";

var params = ["somestring", 99];

database.executeSQL(sql, params, rowCallback, completeCallback);

function rowCallback(rowData) {

console.log("Got row data:", rowData);

}

function completeCallback(error) {

if (error) {

console.log("Failed to execute query:", error);

return

}

console.log("Query complete!");

database.close(function (error) {

if (error) {

console.log("Failed to close database:", error);

return

}

});

}

});

4.Realm

realm是一个跨平台移动数据库引擎，支持iOS、OS X(Objective-C和Swift)、Android以及react-native。

在使用过程中，简单,粗暴，而且官方文档清晰，全面。

总结

2017年第一篇文章，写的有点水，但也是很努力的研究过这几个方法，过段时间会把写好的demo放到github上。

2017年，我会努力写更多的，更好的文章来分享给大家，欢迎各位在评论区评论和发私信给我呦！