Flutter本地缓存插件ffcache的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter本地缓存插件ffcache的使用

ffcache 是一个基于文件的键值存储库,适用于Flutter应用。它在iOS/Android应用的临时文件夹中存储缓存,并且支持自动过期机制。此外,它还支持Web平台(通过 idb_shim 包)。

使用方法

大多数方法都是异步的,因此你应该在一个异步函数中使用 await 来调用它们。

示例代码

以下是完整的示例代码,展示如何使用 ffcache 插件进行缓存操作:

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:ffcache/ffcache.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFCache Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(title: Text('FFCache Demo')), body: FFCacheTestPage()),
    );
  }
}

class FFCacheTestPage extends StatefulWidget {
  FFCacheTestPage({Key? key}) : super(key: key);

  @override
  _FFCacheTestPageState createState() => _FFCacheTestPageState();
}

class _FFCacheTestPageState extends State<FFCacheTestPage> {
  void testFFCacheSaved() async {
    final cache = FFCache(name: 'test');
    await cache.init();

    if (!await cache.has('key1')) {
      await cache.setString('key1', 'test');
    }
    if (!await cache.has('key2')) {
      await cache.setStringWithTimeout('key2', 'test', Duration(seconds: 60));
    }
    if (!await cache.has('key3')) {
      await cache.setStringWithTimeout('key3', 'test', Duration(hours: 10));
    }

    print(cache.remainingDurationForKey('key1'));
    print(cache.remainingDurationForKey('key2'));
    print(cache.remainingDurationForKey('key3'));

    print(await cache.ageForKey('key1'));
  }

  void testFFCache() async {
    final cache = FFCache(debug: true);

    await cache.clear();

    // 测试 setString & getString
    {
      final value = 'value';
      await cache.setString('key', value);
      final retValue = await cache.getString('key');
      assert(retValue == 'value');
    }

    // 如果未找到,getString 返回 null
    {
      final retValue = await cache.getString('unknownkey');
      assert(retValue == null);
    }

    {
      assert(await cache.has('key') == true);
      assert(await cache.remove('key') == true);
      assert(await cache.has('key') == false);
    }

    {
      final str = 'string data';
      List<int> bytes = utf8.encode(str);

      await cache.setBytes('bytes', bytes);
      final rBytes = await cache.getBytes('bytes');
      assert(ListEquality().equals(bytes, rBytes));
    }

    {
      final jsonData = json.decode(
          '''[{"id":1,"data":"string data","nested":{"id":"hello","flutter":"rocks"}}]''');
      await cache.setJSON('json', jsonData);

      final rJsonData = await cache.getJSON('json');
      assert(jsonData.toString().compareTo(rJsonData.toString()) == 0);
    }

    {
      final willExpireKey = 'willexpirekey';
      await cache.setStringWithTimeout(
          willExpireKey, 'value', Duration(milliseconds: 100));

      assert(!cache.remainingDurationForKey(willExpireKey).isNegative);

      // sleep(Duration(milliseconds: 150)); // 在Web上不起作用
      await Future.delayed(const Duration(milliseconds: 150));

      assert(cache.remainingDurationForKey(willExpireKey).isNegative);

      assert(await cache.getString(willExpireKey) == null);
    }

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text("testFFCache() passed all asserts. Everything went ok."),
      backgroundColor: Colors.blue,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            child: Text("测试 FFCache"),
            onPressed: testFFCache,
          ),
        ],
      ),
    );
  }
}

API

更多API文档可以参考 这里

工作原理

缓存文件存储在应用程序的临时目录中,使用 path_providergetTemporaryDirectory() 方法获取该目录。临时目录中的文件可以随时被操作系统删除,因此 FFCache 不适合用于通用的键值存储。

默认情况下,缓存会在一天后过期。旧的缓存条目在 FFCache 初始化时会被删除。

通过以上示例和说明,您可以快速上手并使用 ffcache 进行本地缓存管理。


更多关于Flutter本地缓存插件ffcache的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地缓存插件ffcache的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用ffcache插件进行本地缓存的示例代码。ffcache是一个用于Flutter的本地缓存库,可以方便地在本地存储和检索数据。

首先,确保你已经在pubspec.yaml文件中添加了ffcache依赖:

dependencies:
  flutter:
    sdk: flutter
  ffcache: ^x.y.z  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

示例代码

下面是一个完整的Flutter应用示例,展示了如何使用ffcache进行数据的缓存和检索。

main.dart

import 'package:flutter/material.dart';
import 'package:ffcache/ffcache.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFCache Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final cache = FFCache();
  String? cachedData;

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  Future<void> _retrieveData() async {
    String key = "exampleKey";
    String? data = await cache.get<String>(key);
    
    if (data == null) {
      // 数据未缓存,执行其他操作(例如从网络获取数据)
      data = "This is some data from network or other source.";
      await cache.set(key, data, duration: Duration(minutes: 5));
    }

    setState(() {
      cachedData = data;
    });
  }

  void _clearCache() async {
    await cache.clear();
    setState(() {
      cachedData = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FFCache Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              cachedData ?? 'Loading...',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _clearCache,
              child: Text('Clear Cache'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 依赖安装:在pubspec.yaml文件中添加ffcache依赖,并运行flutter pub get

  2. 创建应用:使用MaterialApp创建一个Flutter应用,并设置主页为MyHomePage

  3. 状态管理MyHomePage是一个有状态组件,用于管理缓存数据的显示和更新。

  4. 初始化缓存:在initState方法中调用_retrieveData函数,尝试从缓存中获取数据。如果数据不存在,则模拟从其他来源(如网络)获取数据,并将其存入缓存。

  5. 缓存操作

    • 使用cache.get<String>(key)从缓存中获取数据。
    • 使用cache.set(key, data, duration: Duration(minutes: 5))将数据存入缓存,并设置缓存有效期为5分钟。
    • 使用cache.clear()清除所有缓存数据。
  6. UI更新:通过setState方法更新UI,以反映缓存数据的变化。

  7. 按钮操作:提供一个按钮,点击后调用_clearCache函数清除缓存,并更新UI。

这样,你就可以在Flutter应用中使用ffcache插件进行本地缓存了。希望这个示例代码能帮助你更好地理解和使用ffcache

回到顶部