解决WebView写入localstorage但首次加载取不到值的问题

本文是解决Android写localstorage的问题。

在android中,native经常需要和h5页面进行交互,比如将本地token写入h5,然后h5中的js获取token进行api请求。

写入localstorage的方法很标准,即在webview的onPageFinished中注入并调用一段js即可。

java 复制代码
viewBinding.webViewHide.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('Authorization','" + WXApp.getInstance.tokenValue + "');", null);
                viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('userid','" + WXApp.getInstance.userId + "');", null);
                viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('Tenant-Id','" + WXApp.getInstance.schoolId + "');", null);
            }
        });

但是这样做有个问题,就是dom数据注入是在页面加载完毕之后进行,而页面加载完毕,页面中的js也就基本执行完毕了,所以页面中原有的js执行获取数据是获取不到的。

一种解决方法就是在h5内判断token是否为空,如果是则重新刷新页面。因为token为空是在首次加载页面时发生的,所以也只有在首次加载页面时会重新刷新,只有首次加载页面成功,写入localstorage,后面获取localstorage都不会失败了。

复制代码
    componentWillMount() {
        if (token === null) {
            token = localStorage.getItem("token")
            if (token === null) {
                window.location.reload()
            }
        }
    }

还有一种方法就是加载页面前,隐式的创建一个webview并访问目标根url,将localstorage预先写入。注意,根目标url一定要以/结尾,比如 http://www.a.com/

java 复制代码
private void hideWebView(){
        WebSettings settings = viewBinding.webViewHide.getSettings();
        // 启用LocalStorage
        settings.setDomStorageEnabled(true);
        settings.setDatabaseEnabled(true);
        settings.setJavaScriptEnabled(true);//允许使用jst
        viewBinding.webViewHide.loadUrl(mUrl);
        viewBinding.webViewHide.setWebViewClient(new WebViewClient() {
            public void onFormResubmission(WebView paramAnonymousWebView, Message paramAnonymousMessage1, Message paramAnonymousMessage2) {
                paramAnonymousMessage2.sendToTarget();
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);

                viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('Authorization','" + WXApp.getInstance.tokenValue + "');", null);
                viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('userid','" + WXApp.getInstance.userId + "');", null);
                viewBinding.webViewHide.evaluateJavascript("window.localStorage.setItem('Tenant-Id','" + WXApp.getInstance.schoolId + "');", null);

                initWebView();
            }
        });
    }

还有一个问题,js注入数据之后,页面空白,

启用LocalStorage

java 复制代码
settings.setDomStorageEnabled(true);
相关推荐
小bo波13 小时前
从"任意文件复制"深挖Java I/O:字符流与字节流的本质抉择
java·nio·io流·后端开发·文件复制
代码煮茶15 小时前
React 组件封装方法论 —— 以 Todo App 为例
javascript·react.js
任沫15 小时前
Agent之Function Call
javascript·人工智能·go
默_笙16 小时前
🛬 我让 AI 帮我写了一个打飞机游戏,结果 Canvas 把我整不会了
前端·javascript
梯度不陡16 小时前
AI 到底能不能从零写软件?ProgramBench 和 RepoZero 给出了两种答案
前端·javascript·面试
胡萝卜术18 小时前
滑动窗口最大值:从暴力到单调队列,层层优化全解析
前端·javascript·面试
kyriewen19 小时前
2026 年了,这 6 个 npm 包可以卸载了——浏览器原生 API 已经能替代
前端·javascript·npm
铁皮饭盒20 小时前
bun直接tsx,优雅!
javascript·后端
_柳青杨1 天前
一文吃透 Node.js 事件循环:从原理到 Node 20+ 重大变更
javascript·后端
JieE2121 天前
LeetCode 101. 对称二叉树|JS 递归 + 迭代双解法,彻底搞懂镜像判断
javascript·算法