1

I want to set some key&value pairs in local storage of my WebView in my flutter app. I am using the library called flutter_webview_plugin.

I am aware of this question.

Eventually i want to set a token, in order to reach a authentication-required URL directly, which is stored as 'jwt_token' in Chrome's local storage.

The library i use provides a withLocalStorage property, and a evalJavascript method:

flutterWebviewPlugin
        .launch("SOME_URL",
            withLocalStorage: true, withJavascript: true,)
        .whenComplete(() {
      flutterWebviewPlugin.evalJavascript("window.localStorage.setItem('key', 'key')");
      flutterWebviewPlugin.evalJavascript("alert(window.localStorage.getItem('key'))");
      flutterWebviewPlugin.evalJavascript("alert('test alert')");

After running the code above the "test alert" pops in my webview browser, which indicates that evalJavascript method is working correctly, but the prior alert with the localStorage.getItem method does not pop. I have tried with and without window object, all '' "" combinations and the result is the same. I cannot set information in my local storage with this JS method. Can you help me please ?

mekusi
  • 11
  • 1
  • 3

1 Answers1

3

You can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

localStorage feature is enabled by default!

Here is a quick example that sets and retrieve a localStorage value when the page stops loading:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController _webViewController;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                  child: InAppWebView(
                    initialUrl: "https://github.com/flutter",
                    initialHeaders: {},
                    initialOptions: InAppWebViewGroupOptions(
                      crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      _webViewController = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) async {
                      await controller.evaluateJavascript(source: "window.localStorage.setItem('key', 'localStorage value!')");
                      await controller.evaluateJavascript(source: "alert(window.localStorage.getItem('key'))");
                    },
                  ))
            ])),
      ),
    );
  }
}

Screenshot:

enter image description here

Lorenzo Pichilli
  • 2,896
  • 1
  • 27
  • 50
  • Hi @Lorenzo, is the plugin supports even after reloading the url, previously set Localstorage values will they stay same or do we have to set the storage again after reloading. Thanks !! – Ampati Hareesh Jun 29 '20 at 06:48
  • It's JavaScript. LocalStorage values remains also when you leave the webpage, instead, SessionStorage is available only within the session. However, you need to check the official JavaScript API. – Lorenzo Pichilli Jun 29 '20 at 08:22
  • thank you, I understand it related to the javascript, but i tried with your plugin to load the url once after setting the LocalStorage then did the reload part, – Ampati Hareesh Jun 29 '20 at 15:31
  • For any problem, open an issue to the GitHub repository. Thanks – Lorenzo Pichilli Jun 29 '20 at 15:39
  • on IOS, is there anyway to set it before, while the page is loading? on load complete the entire page has loaded. And if it does not have the required values, it gets redirected. – Jalpesh Oct 15 '20 at 20:14
  • I am facing an issue with flutter_inappwebview. On IOS onLoadStop only called once. There is an open ticket on github repository. https://github.com/pichillilorenzo/flutter_inappwebview/issues/1555 – fajar ainul May 04 '23 at 07:09