Voyage_dev
항해하는 개발자
Voyage_dev
전체 방문자
오늘
어제
  • All (158)
    • Front-End (102)
      • HTML & CSS (7)
      • JavaScript (13)
      • Web & 표준 & ETC (15)
      • React (17)
      • Next (13)
      • TypeScript (6)
      • Zustand (1)
      • AWS (4)
      • Redux (1)
      • MobX (9)
      • GraphQL (1)
      • Flutter (15)
    • 알고리즘 (12)
      • Java (11)
      • JavaScript (1)
    • Git (1)
    • Project (2)
      • 개인 (1)
      • 팀 (1)
    • Books (30)
      • 누구나 자료구조와 알고리즘 (20)
      • Do It 타입스크립트 프로그래밍 (9)
    • 자료구조 (6)
    • 취업 (1)
    • 항해플러스 (1)
      • 1주 (1)

블로그 메뉴

  • 👨🏻‍💻 Github
  • 💻 Rss 블로그
  • 🏊‍♂️ Resume
  • 🗂️ Portfolio

인기 글

최근 댓글

hELLO · Designed By 정상우.
Voyage_dev

항해하는 개발자

Front-End/Flutter

[Flutter] Shared preferences

2023. 10. 28. 17:35

Shared Preferences

  • 앱을 껐다가 켜면 state는 초기화된다. 그래서 state 안에 있던 데이터를 어딘가 저장해 두고 싶으면 서버로 보내서 DB에 저장을 하든가 아니면 shared preferences라는 로컬 공간에 저장하면 된다. 이는 웹에서 로컬 스토리지처럼 앱 데이터 삭제를 누르지 않는 이상 영구적으로 남아있다.

shared_preferences 설치

shared_preferences: ^2.0.11
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert'; // 유용한 함수가 들어있는 기본 패키지

shared preferences에 데이터 저장하는 법

saveData(){
  var storage = await SharedPreferences.getInstance();
  storage.setString('name', 'john');
}
  • SharedPreferences.getInstance() 이거 실행해야 저장소를 불러올 수 있고
  • setString('자료이름', '저장할자료') 쓰면 저장된다.

저장했던 자료 출력하는 법

saveData(){
  var storage = await SharedPreferences.getInstance();
  storage.setString('name', 'john');
  var result = storage.getString('name');
  print(result);
}
  • getString('자료이름') 쓰면 저장해놨던 자료가 출력된다.
  • 실은 getString() 말고 get() 만 써도 출력되긴 하는데 getString() 이래야 타입지정도 잘해준다.
  • 진짠지 확인해보려면 saveData() 이거 initState() 이런데 안에서 실행해 보면된다.

다양한 저장가능

storage.setString('name', 'john');
storage.setBool('name', true);
storage.setInt('name', 20);
storage.setDouble('name', 20.5);
storage.setStringList('name', ['john', 'park']);
  • 숫자, 문자, Bool, List<String> 자료형도 저장가능.
  • 참고로 List<int> 이런거 저장 못해서 List<String>으로 바꿔서 저장하든 해야된다.

자료 삭제

storage.remove('name');

Map 자료 저장

storage.setString('map', jsonEncode({ 'age' : 20 }) );
  • Map 저장은 바로 못 하기 때문에 Map 데이터를 문자로 변환해야 저장이 가능하다
  • jsonEncode()를 쓰면 Map ⇒ JSON으로 변환한다
  • JSON는 따옴표친 Map인데 문자취급을 해 주기 때문에 저장이 가능하다
var result = storage.getString('map') ?? '없는데요';
print(jsonDecode(result));
  • JSON으로 저장하면 자료 꺼내도 JSON
  • JSON -> Map 변환하고 싶으면 반대로 jsonDecode() 안에 넣어주면 된다.
  • ?? 이건 null check 위해서 쓴다.
  • 유저의 앱 설정같은걸 넣어둘 수도 있고
  • 게임의 경우 게임 세이브파일을 보관하기도 하고
  • 메모나 캘린더앱의 경우 유저가 작성한 데이터를 보관해둘 수도 있고
  • 인스타그램의 경우 이미 본 게시물들은 shared_preferences에 저장해두면 GET요청 없이도 빨리 기존 게시물을 띄워줄 수 있다.
  • 하지만 문자만 저장가능해서 이미지 같은건 못집어 넣는다.
  • 이미지도 미리 저장해두고 싶으면 cached_network_image 이런 패키지를 공부해 보자

 

출처: 코딩애플

'Front-End > Flutter' 카테고리의 다른 글

[Flutter] MultiProvider  (0) 2023.10.28
[Flutter] Provider  (1) 2023.10.28
[Flutter] GestureDetector  (0) 2023.10.28
[Flutter] 내장 Image file  (0) 2023.10.28
[Flutter] Navigator  (0) 2023.10.28
    'Front-End/Flutter' 카테고리의 다른 글
    • [Flutter] MultiProvider
    • [Flutter] Provider
    • [Flutter] GestureDetector
    • [Flutter] 내장 Image file
    Voyage_dev
    Voyage_dev

    티스토리툴바