WebView写入数据到 localStorage总结

男娘i 2022-06-10 10:28 529阅读 0赞

最近项目中使用了 Hybrid 的框架，也通过 JSBridge 搭建了 WebView 与 JavaScript 的通信，但是据前端说收发消息比较繁琐，而另外一种 localStorage 的方法非常简单，我心里想：既然我已经掌握了一种方法了，为何不再学一下另一种方法？于是就简单去看了看，得到了如下方法：

//1.拼接 JavaScript 代码
    String key= "userInfo";
    User user = new User();
    user.setName("Vicent");
    user.setPhone(18888886666);
    String value = new Gson().toJson();
    String js = "window.localStorage.setItem("+key+",'" + value + "');";
    String jsUrl = "javascript:(function({ var localStorage = window.localStorage; localStorage.setItem("+key+",'" + value + "') })()";
    
    //2.根据不同版本，使用不同的 API 执行 Js
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        mWebView.evaluateJavascript(js, null);
    } else {
        mWebView.loadUrl(jsUrl);
        mWebView.reload();
    }

经过了解，setItem 方法类似于 Map 对象一般，是以 key—value 键值对存储的，取出这个value的方法如下：

window.localStorage.getItem('userInfo')

当然，取值不用我们操心，前端肯定相当熟练了！那么直接用吗？不，至少我们需要对 WebView 设置一些函数，如下：

mWebView = (WebView) this.findViewById(R.id.webview);  
    
    WebSettings settings = mWebView.getSettings();  
    settings.setJavaScriptEnabled(true);  
    //settings.setPluginsEnabled(true); 
    
    /***打开本地缓存提供JS调用**/  
    mWebView.getSettings().setDomStorageEnabled(true);  
    // Set cache size to 8 mb by default. should be more than enough 
    mWebView.getSettings().setAppCacheMaxSize(1024*1024*8);  
    
    // This next one is crazy. It's the DEFAULT location for your app's cache 
    // But it didn't work for me without this line. 
    // UPDATE: no hardcoded path. Thanks to Kevin Hawkins 
    String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();  
    mWebView.getSettings().setAppCachePath(appCachePath);  
    mWebView.getSettings().setAllowFileAccess(true);  
    mWebView.getSettings().setAppCacheEnabled(true);

做了这么多，终于可以了吗？由于我们需要在加载html以后，html需要显示用户信息，所以我们需要在 mWebView.loadUrl(“www.\* \* \*”) 以后立即传给html，经过运行后却取出值为 null ，这是什么情况呢？哪里不对吗？

经过请教后得知，原因如下：

> 是因为一开始就执行写入数据到 localStorage 的存值操作，那时候页面还没有渲染出来，执行的 js 找不到宿主，因此写入数据失败！

那么，什么时候写入比较好呢？我首先想到的是通过 Handler 的延迟执行方法，来写入数据，但是延迟时间多少比较合适呢？答案还得从WebView中来寻找！

private boolean inWrited = false;
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if(!inWrited){
                setData(webView);
                inWrited = true;
            }
        }
    });
    
    private void setData(WebView mWebView) {
            //1.拼接 JavaScript 代码
            String key= "userInfo";
            User user = new User();
            user.setName("Vicent");
            user.setPhone(18888886666);
            String value = new Gson().toJson();
            String js = "window.localStorage.setItem("+key+",'" + value + "');";
            String jsUrl = "javascript:(function({ var localStorage = window.localStorage; localStorage.setItem("+key+",'" + value + "') })()";
    
    //2.根据不同版本，使用不同的 API 执行 Js
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mWebView.evaluateJavascript(js, null);
        } else {
            mWebView.loadUrl(jsUrl);
            mWebView.reload();
        }
        }

**以上则是在 WebView 在加载 html 文件后立即写入数据到 localStorage 。而 js文件在设置用户信息的时候，取值的时候也再也不会取不出来了！**

--------------------

上面的方法几乎全是大神分享的，主要是自己对WebView不够熟悉，一开始我以为写入数据到 localStorage 这个方法失效了，后来确实相信是自己操作的姿势不对。在知道写入 localStorage 需要延迟时也没有想到 WebViewClient 的相关方法，尽管这些方法都是在网上看过的，但是因为自己从来没有使用过这些方法，所以需要用的时候一时意识不到。因此做一个记录，以后自己有时间也可以多来看看！

--------------------

## 参考文章： ##

[http://blog.csdn.net/u011240877/article/details/52839845][http_blog.csdn.net_u011240877_article_details_52839845]  
[http://blog.csdn.net/qq\_16559905/article/details/51376371][http_blog.csdn.net_qq_16559905_article_details_51376371]

[http_blog.csdn.net_u011240877_article_details_52839845]: http://blog.csdn.net/u011240877/article/details/52839845
[http_blog.csdn.net_qq_16559905_article_details_51376371]: http://blog.csdn.net/qq_16559905/article/details/51376371