Android Webview H5交互之LocalStorage

96
Teprinciple
0.4 2017.09.23 16:39* 字数 571

前言

在原生app的开发中,我们或多或少都会在项目中接入H5网页,尤其是电商等项目中,因为要求频繁更新UI,所以会大量使用H5页面。有些H5页面,会根据不同用户、是否登录等条件展示不同的页面。这就要求我们Android app开发者在webview加载网页的时候,告诉H5开发者关于用户的信息。我们可以直接在网页的get参数上拼接上改用户的token,这种方法很简单直接。但是当我们有大量的H5页面,需要多个参数,并且随着用户登录登出操作这些参数会发生变化的时候,再使用拼接get的形式会显得非常臃肿和繁琐。此时使用LocalStorage会显得非常方便。

关于LocalStorage

localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中。在移动设备上,由于大部分浏览器都支持web storage特性,因此在android和ios等智能手机上的web浏览器都能正常使用该特性。
localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。

因此我们可以将数据存到LocalStorage,H5从中读取想要的数据。

开始使用

第一步、与H5开发者沟通

首先你需要和H5开发者协商好采用LocalStorage来交互数据,并约定好各数据的key值。

第二步、配置Webview

Android Webview 默认状态下是不支持LocalStorage的,我们要进行以下设置:

WebSettings websettings = webView.getSettings();
websettings.setDomStorageEnabled(true);  // 开启 DOM storage 功能
websettings.setAppCacheMaxSize(1024*1024*8);
String appCachePath = context.getApplicationContext().getCacheDir().getAbsolutePath();
websettings.setAppCachePath(appCachePath);
websettings.setAllowFileAccess(true);    // 可以读取文件缓存
websettings.setAppCacheEnabled(true);    //开启H5(APPCache)缓存功能
第三步、写入数据
webView.setWebViewClient(
                new WebViewClient() {
                    @Override
                    public void onPageFinished(WebView view, String url) {
                        super.onPageFinished(view, url);
                        writeData();
                    }
        );
 public void writeData(){
        String key = "token";
        String val = SpfsUtils.readString(MyApp.getContext(),"token");
        String key2 = "is_app";
        String val2 = "101";
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
            webView.evaluateJavascript("window.localStorage.setItem('"+ key +"','"+ val +"');", null);
            webView.evaluateJavascript("window.localStorage.setItem('"+ key2 +"','"+ val2 +"');", null);
        } else {
            webView.loadUrl("javascript:localStorage.setItem('"+ key +"','"+ val +"');");
            webView.loadUrl("javascript:localStorage.setItem('"+ key2 +"','"+ val2 +"');");
        }
    }
注意:一定要在onPageFinished方法中写入才有效。

就这样就实现了使用LocalStorage 让app与H5共享数据的功能。

Android