Android Webview H5交互之LocalStorage

前言

在原生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共享数据的功能。