react-native基础：global全局变量和持久化

发表于   |   分类于   |  

如何实现react-native的全局变量呢

参考网上的答案，使用global,类似于web的window,
比如
global.isBeat = true,
全局就知道这是一个测试版

如何做持久化存储呢

推荐react-native-storage

  • 支持react-native(AsyncStorage,简单的异步的持久化的key-value存储系统)
  • 支持浏览器（localStorage）
  • es6语法，promise异步读取，使用jest进行单元测试

推荐new出来的Storage给global，这样我们就能全局使用了。
比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var storage = new Storage({
  // 最大容量，默认值1000条数据循环存储
  size: 1000,

  // 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
  // 如果不指定则数据只会保存在内存中，重启后即丢失
  storageBackend: AsyncStorage,

  // 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
  defaultExpires: 1000 * 3600 * 24,

  // 读写时在内存中缓存数据。默认启用。
  enableCache: true,
  
}

global.storage = storage;

保存 读取 删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// 使用key来保存数据。这些数据一般是全局独有的，常常需要调用的。
  // 除非你手动移除，这些数据会被永久保存，而且默认不会过期。
  storage.save({
    key: 'loginState',  // 注意:请不要在key中使用_下划线符号!
    rawData: { 
      from: 'some other site',
      userid: 'some userid',
      token: 'some token'
    },

    // 如果不指定过期时间，则会使用defaultExpires参数
    // 如果设为null，则永不过期
    expires: 1000 * 3600
  });

  // 读取
  storage.load({
    key: 'loginState',

    // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
    autoSync: true,

    // syncInBackground(默认为true)意味着如果数据过期，
    // 在调用sync方法的同时先返回已经过期的数据。
    // 设置为false的话，则始终强制返回sync方法提供的最新数据(当然会需要更多等待时间)。
    syncInBackground: true
  }).then(ret => {
    // 如果找到数据，则在then方法中返回
    // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
    // 你只能在then这个方法内继续处理ret数据
    // 而不能在then以外处理
    // 也没有办法“变成”同步返回
    // 你也可以使用“看似”同步的async/await语法

    console.log(ret.userid);
    this.setState({ user: ret });
  }).catch(err => {
    //如果没有找到数据且没有sync方法，
    //或者有其他异常，则在catch中返回
    console.warn(err.message);
    switch (err.name) {
        case 'NotFoundError':
            // TODO;
            break;
        case 'ExpiredError':
            // TODO
            break;
    }
  })
  
  // --------------------------------------------------

// 获取某个key下的所有id
storage.getIdsForKey('user').then(ids => {
    console.log(ids);
});

// 获取某个key下的所有数据
storage.getAllDataForKey('user').then(users => {
    console.log(users);
});

// !! 清除某个key下的所有数据
storage.clearMapForKey('user');

// --------------------------------------------------  

// 删除单个数据
storage.remove({
    key: 'lastPage'
});
storage.remove({
    key: 'user',
    id: '1001'
});

// !! 清空map，移除所有"key-id"数据（但会保留只有key的数据）
storage.clearMap();