How to save to web local storage in flutter web

Question

I have a web site built with flutter for web and currently, am trying to save to web local storage or cookie but can't seem to find any plugin or way to archive that.

Answer 1

You can use window.localStorage from dart:html

import 'dart:html';

class IdRepository {
  final Storage _localStorage = window.localStorage;

  Future save(String id) async {
    _localStorage['selected_id'] = id;
  }

  Future<String> getId() async => _localStorage['selected_id'];

  Future invalidate() async {
    _localStorage.remove('selected_id');
  }
}

Answer 2

shared_preferences dart package now supports local storage for the web from version 0.5.4.7+

Similar to shared preference on Android and iOS, the following is the code snippet for local storage on web

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart'; // rememeber to import shared_preferences: ^0.5.4+8


void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
      child: RaisedButton(
        onPressed: _incrementCounter,
        child: Text('Increment Counter'),
        ),
      ),
    ),
  ));
}

_incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  await prefs.setInt('counter', counter);
}

Answer 3

I ran into a similar issue where my preferences weren't being persisted across runs. I thought window.localStorage was broken. I discovered that Flutter was simply launching with a new port number every time by default, so window.localStorage was getting wiped out.

This ticket talks about setting an explicit port. This fixed my issue, and now window.localStorage persists across runs:

https://github.com/Dart-Code/Dart-Code/issues/1769

In VS Code, you can set the port number in your launch.json file:

{
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "args": ["--web-port", "8686"]
},

Answer 4

With flutter 1.10 we can use universal_html package:

import 'package:universal_html/html.dart';
// ...
// read preference
var myPref = window.localStorage['mypref'];
// ...
// write preference
window.localStorage['mypref'] = myPref;

Answer 5

I am using shared_preferences package to store data on local storage

class SessionManager {
  static SessionManager manager;
  static SharedPreferences _prefs;

  static Future<SessionManager> getInstance() async {
    if (manager == null || _prefs == null) {
      manager = SessionManager();
      _prefs = await SharedPreferences.getInstance();
    }
    return manager;
  }

  void putCityId(String cityId) {
    _prefs.setString("KEY_CITY_ID", cityId);
  }

  String getCityId() {
    return _prefs.getString("KEY_CITY_ID") ?? "";
  }
}

shared_preferences store data for the current session only.

If you want to store data permanently then you should use cookie to store data.

   import 'dart:html';
      
   class CookieManager {
      static CookieManager _manager;
    
      static getInstance() {
        if (_manager == null) {
          _manager = CookieManager();
        }
        return _manager;
      }
    
      void _addToCookie(String key, String value) {
        // 2592000 sec = 30 days.
        document.cookie = "$key=$value; max-age=2592000; path=/;";
      }
    
      String _getCookie(String key) {
        String cookies = document.cookie;
        List<String> listValues = cookies.isNotEmpty ? cookies.split(";") : List();
        String matchVal = "";
        for (int i = 0; i < listValues.length; i++) {
          List<String> map = listValues[i].split("=");
          String _key = map[0].trim();
          String _val = map[1].trim();
          if (key == _key) {
            matchVal = _val;
            break;
          }
        }
        return matchVal;
      }
    }

Answer 6

After upgrading to flutter 1.9, 'dart:html' is not compiled anymore as it is not part of dart SDK that shipped with Flutter. We can use this package at the moment as it support Android, IOS and WEB: crypted_preferences