Shared_Preferences for Flutter Web?

Question

Shared_preferences (https://pub.dev/packages/shared_preferences) doesn't seem to work for Flutter for Web.

I have the following function that's called when a button is pressed.

 getEmail() async {
    print("reached 1st line");
    SharedPreferences prefs = await SharedPreferences.getInstance();
    print("reached 2nd line");
    String _confirmedEmail = prefs.getString('_confirmedEmail') ?? "";
)

It prints "reached 1st line" but not "reached 2nd line", which means the program doesn't go past the await statement. Interestingly I don't get any error either. It seems to just ignore the rest of the function after the await statement.

What is the best alternative to store shared preferences in Flutter for Web?

score 28 · Accepted Answer · answered Jan 03 '20 at 13:56

28

Great news, from version 0.5.6 shared_prefs flutter supports web by default

Now it's includes shared_preferences for web

Your code should work without changes, just update dependency in pubspec.yaml

dependencies:
 shared_preferences: ^0.5.6

answered Jan 03 '20 at 13:56

Vadim Popov

727
8
16

3

How long do these shared preferences persist? I'm seeing that when I do "flutter run -d chrome" I'm able to store things during that session that show up in that session, but if I hit refresh on my browser then I lose my shared prefs. Is that working as designed? is that related to running in debug mode perhaps? – Eradicatore Feb 10 '20 at 17:34
@Eradicatore when I made "flutter build web" and then published on web hosting, it worked for me. Try this command and then launch main index HTML file. – Vadim Popov Feb 10 '20 at 18:07
Yup! I was wondering if that was maybe the case too. It indeed does work for me when I deployed it like that on a GCP VM. Thanks! – Eradicatore Feb 10 '20 at 20:26
@user3808307 I needed to also add `shared_preferences_web` as a dependency to get it working. It looks like the web implementation hasn't been endorsed into the main `shared_preferences` package at the time of writing. – tnc1997 Nov 28 '20 at 07:30

score 13 · Answer 2 · answered Jul 29 '22 at 07:51

Now the latest shared_preference package includes web support. But if you run on debug web mode you will see that the shared preference is not working on the web.

The reason is that Flutter Web runs on a random port every time and cannot recollect the shared or stored data.

The best way to test this is to run the flutter app on the web twice and check the URL it will show different ports always.

localhost:5050/#/

To solve this issue force flutter to run the app on the same port.

you can do this by adding a port while running the flutter app on the web from a terminal like this.

flutter run -d chrome --web-hostname localhost --web-port 5050

Or you can add the port in the lauch.json file of VS code like this.

"version": "0.2.0",
"configurations": [
    {
        "name": "appname",
        "request": "launch",
        "type": "dart",
        "args": ["--web-port", "5050"]
    },

This will help you to maintain the session and also retrieve the data.

Ah I suspected this, thanks! the `shared_preferences` plugin uses "local storage" for web. *Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.* [source](https://www.w3schools.com/html/html5_webstorage.asp) and different ports will be treated as different origins. I'll use the fixed port for debugging :) — KYL3R, Sep 20 '22 at 19:15
Setting fixed port for Android Studio is described here: https://stackoverflow.com/questions/58248277/how-to-specify-a-port-number-while-running-flutter-web — KYL3R, Sep 20 '22 at 19:17

Igor Kharakhordin · Answer 3 · 2020-01-29T14:43:30.867

4

shared_preferences are not supposed to work with flutter web, that's why value of instance never returns. For this purpose, you can use any key-value stores instead, for example, sembast

UPD: the package supports web now since version 0.5.6

edited Jan 29 '20 at 14:43

answered Nov 03 '19 at 07:06

Igor Kharakhordin

9,185
3
40
39

https://stackoverflow.com/questions/64691179/flutter-does-not-return-set-cookie-header-from-basic-auth-in-chrome-web can you help with this – Llama Nov 05 '20 at 04:28

score 1 · Answer 4 · answered Dec 24 '19 at 18:28

1

I think it is supported now due to this. It depends on shared_preferences_web image from pub dev

answered Dec 24 '19 at 18:28

uberchilly

159
1
7

have you tested this for web? – Achin Dec 30 '19 at 04:34

score 0 · Answer 5 · answered Nov 03 '19 at 07:15

You probably check the tags when you search for a library in pub.dev.

For the web the best way to implement that is implementing cache for web and dcache for implement that using flutter_web.

import 'package:dcache/dcache.dart';

void main() {
  Cache c = new SimpleCache(storage: new SimpleStorage(size: 20));

    c.set("key", 42);
    print(c.get("key")); // 42
    print(c.containsKey("unknown_key")); // false
    print(c.get("unknown_key")); // nil
}

As you can see, is very similar to shared_preferences for Flutter.

Hope this could help.

Tarun Jain · Answer 6 · 2021-09-16T06:19:43.100

In latest version of shared_prefs, flutter supports web by default

SharedPreferences pref = await SharedPreferences.getInstance();

 //for setting values locally:
await pref.setString("token", myJWTToken);

//for getting values: 
dynamic token = pref.getString("token");

but still if you are looking for alternative then you can use flutter_session package for almost simillar purpose.

//for setting values locally:
await FlutterSession().set("token", myJWTToken);

//for getting values: 
dynamic token = await FlutterSession().get("token");

Shared_Preferences for Flutter Web?

6 Answers6

Linked