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小時內回覆你