在Flutter Webview中访问localStorage

在Flutter Webview中访问localStorage，首先需要确保WebView的设置允许JavaScript运行

以下是如何在Flutter中使用WebView的示例。首先，确保你已经在pubspec.yaml文件中添加了webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.1

接下来，创建一个包含WebView的简单应用程序：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WebView LocalStorage Example')),
        body: MyWebView(),
      ),
    );
  }
}

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'about:blank',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
      javascriptChannels: <JavascriptChannel>{
        _createJavascriptChannel(context),
      },
    );
  }

  void _loadHtmlFromAssets() async {
    String fileText = await DefaultAssetBundle.of(context).loadString('assets/index.html');
    _controller.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
  }

  JavascriptChannel _createJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
      name: 'FlutterLocalStorage',
      onMessageReceived: (JavascriptMessage message) {
        if (message.message == 'getLocalStorage') {
          _controller.evaluateJavascript('window.localStorage.getItem("key")').then((value) {
            // Do something with the value
            print('Value from localStorage: $value');
          });
        }
      },
    );
  }
}

在这个例子中，index.html文件需要放到项目的assets文件夹中，并包含JavaScript代码来读取localStorage的值，并通过JavascriptChannel将其发送到Flutter中。

assets/index.html示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>LocalStorage Example</title>
</head>
<body>
  <script>
    function sendLocalStorageValue() {
      var value = window.localStorage.getItem("key");
      FlutterLocalStorage.postMessage("getLocalStorage");
    }
  </script>
</body>
</html>

在这个HTML文件中，我们创建了一个简单的JavaScript函数 sendLocalStorageValue，当需要从localStorage获取值时，它将触发一个消息，让Flutter接收。

注意：由于安全原因，WebView中的JavaScript和Flutter之间的通信需要在同一源策略下。如何确保这一点取决于你的WebView设置和加载的HTML内容。上述示例中，在about:blank上加载的HTML内容可以简化这方面的处理。

这样，您就可以在Flutter Webview中通过JavaScriptChannel与localStorage进行交互。如果您需要从Flutter中读取或写入localStorage，可以调整_createJavascriptChannel方法以适应您的需求。