AsyncStorage存储key管理小技巧

本文出自《React Native 每日一学(Learn a little every day)》栏目。

AsyncStorage存储key管理小技巧

场景

AsyncStorage是React Native推荐的数据存储方式。当我们需要根据条件从本地查询出多条记录时,你会想到来一个select * from xx where xx。但是很不幸的告诉你,AsyncStorage 是不支持sql的,因为AsyncStorage是Key-Value存储系统。

那么如何才能快速的从众多记录中将符合条件的记录查询出来呢? 请往下看…

AsyncStorage key管理

为了方便查询多条符合规则的记录,我们可以在保存数据前,对这条数据进行分类,然后记录下这条记录的key。下次再查询该数据前,只需要先查询之前保存的key,然后通过 static multiGet(keys, callback?) API,将符合规则的数据一并查询出来。

用例

保存数据

第一步:保存数据

  saveFavoriteItem(key,vaule,callback) {
    AsyncStorage.setItem(key,vaule,(error,result)=>{
      if (!error) {//更新Favorite的key
        this.updateFavoriteKeys(key,true);
      }
    });
  }

第二步:更新key

/**
   * 更新Favorite key集合
   * @param isAdd true 添加,false 删除
   * **/
  updateFavoriteKeys(key,isAdd){
    AsyncStorage.getItem(this.favoriteKey,(error,result)=>{
      if (!error) {
        var favoriteKeys=[];
        if (result) {
          favoriteKeys=JSON.parse(result);
        }
        var index=favoriteKeys.indexOf(key);
        if(isAdd){
          if (index===-1)favoriteKeys.push(key);
        }else {
          if (index!==-1)favoriteKeys.splice(index, 1);
        }
        AsyncStorage.setItem(this.favoriteKey,JSON.stringify(favoriteKeys));
      }
    });
  }

查询批量数据

第一步:查询key

getFavoriteKeys(){//获取收藏的Respository对应的key
    return new Promise((resolve,reject)=>{
      AsyncStorage.getItem(this.favoriteKey,(error,result)=>{
        if (!error) {
          try {
            resolve(JSON.parse(result));
          } catch (e) {
            reject(error);
          }
        }else {
          reject(error);
        }
      });
    });
  }

第二步:根据key查询数据

AsyncStorage.multiGet(keys, (err, stores) => {
    try {
      stores.map((result, i, store) => {
        // get at each store's key/value so you can work with it
        let key = store[i][0];
        let value = store[i][1];
        if (value)items.push(JSON.parse(value));
      });
      resolve(items);
    } catch (e) {
      reject(e);
    }
 });

以上是我在使用AsyncStorage进行批量数据查询的一些思路,大家根据实际情况进行调整。

About

本文出自《React Native 每日一学(Learn a little every day)》栏目。

了解更多,可以关注我的:

GitHub 微博 http://jiapenghui.com

推荐阅读

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

jQuery等静态资源使用公共库CDN及回退地址

3394
来自专栏Web 开发

小试WebMatrix

系统会自动下载PHP解析引擎和MySQL数据库,加起来100多M吧~(2M广州ADSL下载速度不理想,时快时慢)

761
来自专栏架构师之路

微信钱包中58到家首页为什么这么快

原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->...

3247
来自专栏H2Cloud

Base PyQt4, Simple Web APP Framwork

  长时间以来,一直针对Linux 服务器开发后台程序,每天面对的是黑框框,输出只有日志文件。偶尔需要模拟客户端测试,要么是写几行php代码,在浏览器上点一点,...

4164
来自专栏GopherCoder

Django:web框架的学习(3)

1573
来自专栏小文博客

Git:一款比付费主题更像是付费主题的WordPress免费主题

2062
来自专栏MixLab科技+设计实验室

从react-sketch.app说起

airbnb又发布了款开源工具,这次是一个利用react来生成sketch设计稿的工具。 基本原理 是利用sketch开放的api接口,把react写的组件按照...

3765
来自专栏开源项目

Git 项目推荐 | 基于 C# 的极速 WEB + ORM 框架

NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展,让Web开发更迅速、简单...

5578
来自专栏JAVA高级架构

网站性能优化实战——从12.67s到1.06s的故事

2653
来自专栏Python爬虫与算法进阶

App爬虫思路

但是我觉得不够全,首先对于一般的HTTP和HTTPS协议,通过最基本的Fiddler和Charles就可以抓包,具体方法请Google。需要保证两点:App走代...

1.1K2

扫码关注云+社区

领取腾讯云代金券