美文网首页React-Native程序员
React-Native中的数据持久化方式

React-Native中的数据持久化方式

作者: 挂着铃铛的兔 | 来源:发表于2017-02-08 16:06 被阅读1936次
    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年,我会努力写更多的,更好的文章来分享给大家,欢迎各位在评论区评论和发私信给我呦!

    相关文章

      网友评论

      • 5ec1da87f063:按照你写的AsyncStorage存对象方法有局限啊.必须存数组.
        如果存{'XX':'YY'}就不行.
        需要像下面这个样子才可以:https://www.jianshu.com/p/2aaa2367ff06

        var object = {
        name:'xmg',
        age:18
        };

        // JSON.stringify(object): JSON对象转换为字符串 用来存储
        AsyncStorage.setItem('object',JSON.stringify(object),(error)=>{
        if (error) {
        alert('存储失败');
        } else {
        alert('存储成功');
        }
        });
      • Belief_5970:react-native-storage请问怎么同步数据到浏览器的local storage里面 。
        在app里面使用htmlView插件调用web页面,需要把登录的信息同步到浏览的器local storage里面。
        Belief_5970:@挂着铃铛的兔 那应该要怎么同步登录信息,做到用WebView组件访问页面时自动登录 。
        备注:问题里面的htmlView写错了,应该是WebView。
        挂着铃铛的兔:@Belief_5970 这个和web端不兼容吧。
      • NARUTO丶阳:厉害
        挂着铃铛的兔:@NARUTO丶阳 :smile:
      • 04527cd2594c:给你点个赞,小兔子
        挂着铃铛的兔:@04527cd2594c 啊哦:stuck_out_tongue_winking_eye:
      • 简翦儋箪:不错不错,大神,真腻害
        挂着铃铛的兔:@简翦儋箪 一起成长

      本文标题:React-Native中的数据持久化方式

      本文链接:https://www.haomeiwen.com/subject/uctbittx.html