首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Flutter Webview中访问localStorage

在Flutter中,可以使用webview_flutter插件来实现在Flutter Webview中访问localStorage。

localStorage是一种在Web浏览器中存储数据的机制,它允许开发者在浏览器中存储和检索键值对。在Flutter中,通过webview_flutter插件,我们可以在Flutter应用中嵌入一个Webview来加载Web页面,并且可以通过JavaScript与Web页面进行交互。

要在Flutter Webview中访问localStorage,可以按照以下步骤进行操作:

  1. 首先,确保已经在Flutter项目中添加了webview_flutter插件的依赖。
  2. 在Flutter页面中导入webview_flutter插件:
代码语言:txt
复制
import 'package:webview_flutter/webview_flutter.dart';
  1. 创建一个WebView控件,并加载Web页面:
代码语言:txt
复制
WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
)

在initialUrl参数中,可以指定要加载的Web页面的URL。

  1. 在Web页面加载完成后,可以通过JavaScript代码来访问localStorage。可以使用evaluateJavascript方法来执行JavaScript代码,并通过回调函数获取结果:
代码语言:txt
复制
WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
  onPageFinished: (String url) {
    webView.evaluateJavascript('localStorage.getItem("key")', (result) {
      // 处理localStorage的值
    });
  },
)

在上述代码中,evaluateJavascript方法执行了JavaScript代码localStorage.getItem("key"),并通过回调函数获取了localStorage中键为"key"的值。

需要注意的是,为了能够在WebView中执行JavaScript代码,需要将javascriptMode参数设置为JavascriptMode.unrestricted。

推荐的腾讯云相关产品:腾讯云移动浏览器(Tencent Mobile Browser),它是腾讯云提供的一款移动浏览器产品,可以在移动设备上访问Web页面,并支持JavaScript执行和localStorage存储。您可以通过以下链接了解更多关于腾讯云移动浏览器的信息:腾讯云移动浏览器

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 中使用 WebView

Flutter 调用,因此并不能内嵌于 Flutter Widget 树,因此界面的跳转必须得先释放掉,返回后又要重新初始化,所以显示会有很多限制性; interactive_webview 则是基于...webview_flutter 封装的 Flutter 插件,因此原理特性上基本与官方 WebView 一致的; 2018年 Flutter 发展初期,官方的 webview_flutter 插件有很多问题...运行效果如下图所示: 这里只是简单介绍 webview Flutter 的使用,其中的高级特性比如与 JavaScript 交互并没有介绍到,有兴趣的读者可以自行查找资料阅读。 这就结束了吗?...Android 很抱歉,其实到现在我也没找到 Android 9.0+ 上通过 flutterwebview 访问 HTTP 网站的办法,我写在这里也是希望如果我的读者找到了解决方案的话欢迎评论区留言...我查阅了很多资料,也发现了一个曲线救国的做法,就是检测要访问的网页,如果是 HTTPS 的就利用 WebView 访问,如果是 HTTP 的就调用第三方浏览器访问。 额,这个做法吧,不好评价。

3.4K20
  • Flutter 探索 StreamBuilderimage

    偶尔,周期结束之前可能会发出一些值。 Dart ,您可以创建一个返回 Stream 的容量,该容量可以异步进程处于活动状态时发射一些值。...假设您需要根据一个 Stream 的快照在 Flutter 构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客,我们将探索 Flutter 的 StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...如果传递的值不为空,那么当 connectionState 等待时,hasData 属性在任何事件首先都将为 true StreamBuilder( initialData: 0, //...image Code File: 密码档案: import 'package:flutter/material.dart'; import 'package:flutter_steambuilder_demo

    2.5K00

    Flutter Webview添加Cookie的正确姿势

    场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条;按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一条...,来来回回试了很多次都只有一条,心态崩了 后来看到cookie设置数据也是类似键值对里面套键值对,灵机一动,变换下后就成功了,记录下正确的写法吧 正确姿势 引入 使用的是flutter官方维护的webview...插件 webview_flutter: ^0.3.22+1 错误示例 这是最坑的一个,widget都都没写全,就写了俩个回调,这么写只会生效一条 WebViewController _controller...cookie,这个是没问题的,和上面的区别就是,这个使用双引号包住单引号,只写了一条的使用也是让人肝痛 setSessionID() async { String sessionID = await LocalStorage.get..., ) 最重要的变化就是每条cookie都要用document.cookie作为key,这是最最最关键的 优化写法 上面的写法是写成一行,写成一行是很致命的操作,让赋值操作会变得很迷惑,优化下 ///webview

    1.8K31

    利用flutter_downloader插件Flutter实现文件下载

    接下来我们可以 Terminal 输入 flutter packagesget或者点击 IDE 左上角的 Packagesget字样安装依赖。 ?...插件配置 iOS端配置 启用 background mode 想要执行这一步,我们Xcode打开该项目的 iOS module,如下图所示: ?... AndroidManifest.xml 文件添加如下代码: <provider android:name="vn.hunghd.flutterdownloader.DownloadedFileProvider...库 import 'package:<em>flutter</em>_downloader/<em>flutter</em>_downloader.dart'; 文档<em>中</em>还提供了其他API,譬如暂停下载、取消下载,这里就不再阐述了,文档已经写的很清楚了...这里方便起见我选择<em>在</em> initState()函数<em>中</em>初始化下载回调函数和对话框: @override void initState() { super.initState(); // 初始化进度条

    6.2K30

    Android笔记:原生App嵌入Flutter

    首先有一个可以运行的原生项目 第一步:新建Flutter module Terminal进入到项目根目录,执行flutter create -t module ‘module名字’例如:flutter...create -t module flutter-native 执行完毕,就会发现项目目录下生成了一个module 第二步:同步Flutter module依赖 进入到新生成的Flutter module...结束之后.android/Flutter/build/outputs/aar/目录下会生成flutter-debug.aar 第三步:设置JDK版本 app的build.gradle文件中加入: compileOptions...{ sourceCompatibility 1.8 targetCompatibility 1.8 } 第四步:依赖Flutter module settings.gradle中加入 include...app/build.gradle dependencies { …… implementation project(':flutter') } 到此准备过程结束,写代码测试一下,我使用的是

    1.7K40

    UWP WebView 执行 JavaScript 代码(用于模拟用户输入等)

    UWP 中使用 WebView 时可以在网页额外执行一些代码。于是你几乎可以在网页上做任何事情,那些你可以浏览器控制台中做的事情。 本文将介绍做法。...---- 准备环境 页面(XAML)中放一个 WebView,然后取个名字,比如就叫做 WebView。 监听 NavigationCompleted 事件,然后导航到需要操作的页面。... JavaScript ,eval(string) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。...计算结束后,会返回一个字符串,就是参数那个字符串执行完之后的返回值(如果有的话)。...于是意味着你可以通过这种方式拿到输入框的值: var userId = await WebView.InvokeScriptAsync("eval", new[] { "document.getElementById

    2K30

    开发实现点击 WebView 的图片,调用原生控件放大展示

    现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。...今天我们就来学习一下,如何点击 WebView 的网页图片,调用原生控件进行放大展示。 其实实现这种交互非常简单,就是通过 JS 调用原生控件。...设置 WebView 这一步就是将我们写的 html 本地文件放入到 WebView 。...super.onPageFinished(view, url); //这段js函数的功能就是注册监听,遍历所有的img标签,并添加onClick函数,函数的功能是图片点击的时候调用本地...JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”)

    2.4K50
    领券