Flutter 状态管理provide与shared_preferences本地存储的配合使用

本文章是基于状态管理已经配置完毕的基础上，而完成的工作，如果没有配置provide，请看我的另一篇文章：传送门

首先来认识一下shared_preferences

包装NSUserDefaults（在iOS上）和SharedPreferences（在Android上），为简单数据提供持久存储数据以异步方式持久化到磁盘这两个平台都不能保证在返回后写操作将被持久化到磁盘，并且这个插件不能用于存储关键数据。

简单的来说，就是用于简单数据的本地存储，从前端的角度来讲，他就是一个localStorage，本文章在基于原插件的基础上，二次封装一遍自己的方法。

1. 首先安装这个插件（安装最新版本）

shared_preferences: ^0.5.4+3                  

2. 安装好后，我们在自己的插件文件夹中，创建自己的Storage.dart文件
   

Storage.dart
首先要做的就是引入该插件，引入后，我们创建自己的类，因为shared_preferences的源码是写成Future异步形式的，所以我们也将自己的方法写成这种格式，同时将自己的方法都用static声明为静态方法，这样就可以直接访问到了

import 'package:shared_preferences/shared_preferences.dart';

class Storage {

  static Future<void> setString(key, value) async {
    SharedPreferences  sp = await SharedPreferences.getInstance();

    sp.setString(key, value);
  }

  static Future<String> getString(key) async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    return sp.getString(key);
  }

  static Future<void> remove(key) async{
    SharedPreferences sp = await SharedPreferences.getInstance();
    sp.remove(key);
  }

  static Future<void> clear() async{
    SharedPreferences sp = await SharedPreferences.getInstance();
    sp.clear();
  }
}

3.Ok，现在我们自己的方法都声明完毕了，那么我们可以创建调用的方法了，接着在文件夹中创建调用文件

import 'dart:convert';

import 'Storage.dart';

class PublicStorage {
  /*
    1.获取本地存储里面的数据
    2.判断本地存储是否有数据

      2.1 如果有数据
        1、读取本地存储的数据
        2、判断本地存储中有没有当前的数据,
            如果有，不做操作
            如果没有当前数据，本地存储的数据和当前数据拼接后重新写入
      2.2、 如果没有数据
          直接把当前数据放在数组中写入到本地存储
   */

   static setHistoryList(key, value) async {
    try{
      // 首先获取一下判断有没有数据
      var searchListData = json.decode(await Storage.getString(key));

      // 如果本地存储有值，判断是否有这个值
      var hasData = searchListData.any((v){
        // 如果有就返回true，如果没有返回false
        return v == value;
      });

      if(!hasData){
        searchListData.add(value);
        await Storage.setString(key, json.encode(searchListData));
      }
    }catch(e){
      // 没有数据
      List tempList = new List();
      tempList.add(value);
      // json.encode:数组转为字符串
      await Storage.setString(key, json.encode(tempList));
    }
  }

  static getHistoryList(key) async {
    try{
      List searchListData = json.decode(await Storage.getString(key));
      return searchListData;
    }catch(e){
      return [];
    }
  }

  // 清空
  static clearHistoryList(key) async {
    
      await Storage.remove(key);
     
  }

  static removeHistoryData(key, value) async {

      // 首先获取
      // 删除掉
      // 再次存储进去
      List searchListData = json.decode(await Storage.getString(key));
      searchListData.remove(value);
      await Storage.setString(key, json.encode(searchListData));
     
  }

}

4.创建Provide文件(这里面需要配置的很多，具体可以看我另一篇文章)，我们首先来存储一下当前地理定位（定位方面的知识是另外的插件了，这里就不详细讲述了，有需要的话联系我）。

import 'package:flutter/material.dart';
import 'package:project/plugins/PublicStorage.dart';

class UserInfomation with ChangeNotifier{
  var city = '';

  setCity(val) async{
    var new_city;
    // 如果本地存储返回的是个空数组
    if(val.length == 0){
      new_city = '未定位';
    }else{
      new_city = val;
    }
    this.city = new_city;
    // 通知用户
    notifyListeners();
  }
}

4.现在我们拥有了自己的本地存储方法类，就差调用了，因为我要存储的定位，在首先进入APP后，我们肯定要获取一遍本地存储里面是否有该定位，所以我们要在main.js中，调用本地存储的get方法

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

  // 获取本地存储定位
  _getLocation() async {
    locationList = await PublicStorage.getHistoryList('LocationList');
    // 调用状态管理的方法
    Provide.value<UserInfomation>(context).setCity(locationList[0]);
  }

5.我们在调用了状态管理的设置方法后，只需要在需要显示的页面中显示出来状态管理的数据就可以了

好了，一个简单的配合使用，就完成了， 可能有些小伙伴们没有看懂，如果哪里不明白，一定给我留言，24小时内回复你