时间戳

首页 > 解决方案 > Flutter webivew如何设置本地存储

local-storage - Flutter webivew如何设置本地存储

问题描述

我的 Flutter 应用程序流程是这样的：

  1. 用户登录
  2. 如果登录成功，服务器返回一个令牌
  3. 在 webview 中将令牌设置为本地存储
  4. Webview 全屏打开特定 URL

我正在使用这个 Webview 插件。示例代码显示它支持本地存储（它有一个withLocalStorage选项），但没有显示如何使用它。

我试过了：

  1. 创建新FlutterWebviewPlugin实例
  2. 通过调用方法在新创建的实例上设置本地存储evalJavascript

  3. 调用launch实例，设置withJavascript，withLocalStorage到true并将其启动到 URL；

    //1
final flutterWebviewPlugin = new FlutterWebviewPlugin();
//2
flutterWebviewPlugin.evalJavascript("window.localStorage.setItem('token','SOMETOKEN')");
//3
flutterWebviewPlugin.launch(
    "https://SOMEURL",
    withLocalStorage: true,
    withJavascript: true);

如果我正确设置了本地存储，Webview则会显示帐户页面；否则是一个登录页面（这就是发生的事情）

我还注意到evalJavascript调用似乎不起作用。此外，更改步骤 2 和步骤 3 的顺序不会改变任何内容。

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

标签： local-storageandroid-webviewflutter

解决方案

在第 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");
});

推荐阅读