Flutter Webview插件中的“本地存储”属性不起作用 [英] Local Storage property does not work in Flutter Webview Plug-in

问题描述

我想在Flutter应用的WebView的本地存储中设置一些键和值对。我正在使用名为

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 ?

解决方案

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:

这篇关于Flutter Webview插件中的“本地存储”属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！