Question

我的Flutter应用程序流程如下：

用户登录
如果登录成功，服务器将返回令牌
将令牌设置为webview中的本地存储
打开iterate_num 全屏到特定网址

我正在使用this Webview plugin。该示例代码显示了它支持本地存储（具有Webview选项），但没有显示如何使用它。

我尝试过：

创建新的withLocalStorage实例
通过调用方法FlutterWebviewPlugin
在实例上调用evalJavascript，将launch，withJavascript设置为withLocalStorage并将其启动到URL；
```
true
```

如果我正确设置了本地存储，则//1 final flutterWebviewPlugin = new FlutterWebviewPlugin(); //2 flutterWebviewPlugin.evalJavascript("window.localStorage.setItem('token','SOMETOKEN')"); //3 flutterWebviewPlugin.launch( "https://SOMEURL", withLocalStorage: true, withJavascript: true);将显示帐户页面；否则就是登录页面（发生了什么事）

我还注意到Webview调用似乎无效。另外，更改步骤2和步骤3的顺序也不会更改任何内容。

请注意，我知道this question。提供的答案也没有显示如何设置本地存储，也没有显示全屏evalJavascript，因此无法解决我的问题。

Answer 1

在步骤2中，代码在空白的about:blank页面中求值。因此，已保存的属性将分配给about:blank地址，而不是SOMEURL地址。仅在Future返回的.launch(...)完成后，才尝试评估＃2。

例如

flutterWebviewPlugin.launch("https://SOMEURL",
  withLocalStorage: true,
  withJavascript: true
).whenComplete(() {
  final res = flutterWebviewPlugin.evalJavascript("(function() { try { window.localStorage.setItem('token', 'SOMETOKEN'); } catch (err) { return err; } })();");
  // Wrapped `setItem` into a func that would return some helpful info in case it throws.
  print("Eval result: $res");
});

Answer 2

正如我在此处https://stackoverflow.com/a/62172299/4637638所报告的那样，您还可以使用我的插件flutter_inappwebview，它是Flutter插件，可让您添加内联WebView或打开应用内浏览器窗口，并且事件，方法和选项来控制WebView。

它默认启用了localStorage功能！

这是一个快速的示例，它在页面停止加载时设置和检索localStorage值：

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'))");
                    },
                  ))
            ])),
      ),
    );
  }
}

屏幕截图：

Flutter Webivew如何设置本地存储

2 个答案: