Shared_Preferences for Flutter Web? - flutter

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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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");