Flutter本地存储插件localstorage的使用

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

Flutter本地存储插件localstorage的使用

LocalStorage简介

LocalStorage 是Flutter中的一个插件，用于在应用中进行简单的数据持久化。需要注意的是，LocalStorage并不适合存储大量或敏感的数据。

安装

可以通过以下命令安装localstorage插件：

flutter pub add localstorage

或者手动添加到pubspec.yaml文件中：

dependencies:
  localstorage: ^5.0.0

查阅完整的API文档可以访问 LocalStorage API documentation。

使用方法

下面是一个完整的示例demo，展示了如何使用localstorage插件来保存和读取计数器的值：

示例代码

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

// 初始化LocalStorage
Future<void> initLocalStorage() async {
  localStorage = LocalStorage('counter.db');
  await localStorage.ready;
}

late final ValueNotifier<int> notifier;
late LocalStorage localStorage;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initLocalStorage();

  // 从LocalStorage中获取计数器的初始值
  notifier = ValueNotifier(int.parse(localStorage.getItem('counter') ?? '0'));
  
  // 当计数器值发生变化时，保存到LocalStorage
  notifier.addListener(() {
    localStorage.setItem('counter', notifier.value.toString());
  });

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('LocalStorage Demo'),
        ),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: notifier,
            builder: (context, value, child) {
              return Text('Pressed $value times', style: Theme.of(context).textTheme.headline4);
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 增加计数器的值
            notifier.value++;
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

运行效果

  • 应用启动时，会尝试从LocalStorage中读取计数器的值，如果不存在则初始化为0。
  • 每次点击浮动按钮（FloatingActionButton），计数器的值会增加1，并且新的值会被保存到LocalStorage中。
  • 即使关闭应用重新启动，计数器的值依然保持不变，因为它已经保存到了LocalStorage中。

许可证

MIT License

通过以上内容，您可以快速上手使用localstorage插件来进行简单的数据持久化操作。如果有任何问题或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用localstorage插件进行本地存储的示例代码。需要注意的是，localstorage插件并不是Flutter官方推荐的插件，更常见的做法是使用shared_preferences或者path_provider结合Dart的File类进行本地存储。不过，为了符合你的要求，这里假设你使用的是某个名为localstorage的第三方插件（注意：实际插件名称可能有所不同，请根据实际情况调整）。

首先，确保你已经将localstorage插件添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  localstorage: ^x.y.z  # 请替换为实际版本号

然后，运行flutter pub get来安装插件。

接下来，在你的Dart代码中，你可以按照以下方式使用localstorage插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  LocalStorage localStorage;

  @override
  void initState() {
    super.initState();
    localStorage = new LocalStorage('my_app_storage');
  }

  void _saveData() async {
    String key = 'username';
    String value = 'JohnDoe';
    await localStorage.setItem(key, value);
    print('Data saved: $key -> $value');
  }

  void _readData() async {
    String key = 'username';
    String? value = await localStorage.getItem(key);
    print('Data read: $key -> $value');
    if (value != null) {
      // Update UI or handle the retrieved data
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Username: $value")),
      );
    }
  }

  void _removeData() async {
    String key = 'username';
    await localStorage.removeItem(key);
    print('Data removed: $key');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Local Storage Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _saveData,
              child: Text('Save Data'),
            ),
            ElevatedButton(
              onPressed: _readData,
              child: Text('Read Data'),
            ),
            ElevatedButton(
              onPressed: _removeData,
              child: Text('Remove Data'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个简单的Flutter应用，它包含三个按钮：一个用于保存数据，一个用于读取数据，另一个用于删除数据。我们使用了LocalStorage类来管理本地存储。

  • _saveData方法将数据保存到本地存储中。
  • _readData方法从本地存储中读取数据，并在读取成功后显示一个SnackBar。
  • _removeData方法从本地存储中删除数据。

请注意，由于localstorage插件的具体API可能有所不同，上述代码中的方法调用（如setItem、getItem和removeItem）可能需要根据实际插件的文档进行调整。如果localstorage插件不存在或API不同，建议使用shared_preferences插件，它提供了类似的功能，并且得到了更广泛的支持和使用。

回到顶部