Local Storage for Android Webview H5 Interaction

Preface

In the development of native app, we will more or less access H5 pages in the project, especially in e-commerce projects, because of frequent UI updates, so we will use H5 pages a lot. Some H5 pages display different pages according to different users and login conditions. This requires us Android app developers to tell H5 developers about users when webview loads a web page. We can modify the token of the user directly by splicing the get parameters of the web page. This method is very simple and direct. But when we have a large number of H5 pages and need many parameters, and these parameters will change with the user login and logout operation, it will be very cumbersome and cumbersome to use the form of stitching get. Local Storage is very convenient to use at this time.

On Local Storage

As one of the API s for HTML5 to store web storage features locally, the main function of localStorage is to store data in the client. On mobile devices, because most browsers support the web storage feature, web browsers on smartphones such as android and ios can use this feature normally.
Local Storage holds data that is generally permanently stored, that is to say, as long as the information is saved by local Storage, the data is always stored in the user's client. Even if the user restarts after closing the current web browser, the data will exist. The life cycle of data will end only when the user or program is clear about deletion.

So we can store the data in the Local Storage from which H5 reads the desired data.

Start using

Step 1: Communicate with H5 developers

First, you need to negotiate with H5 developers to use Local Storage to interact with data, and agree on the key value of each data.

Step 2: Configuring Webview

Android Webview does not support LocalStorage by default. We need to set up the following settings:

WebSettings websettings = webView.getSettings();
websettings.setDomStorageEnabled(true);  // Open DOM storage function
websettings.setAppCacheMaxSize(1024*1024*8);
String appCachePath = context.getApplicationContext().getCacheDir().getAbsolutePath();
websettings.setAppCachePath(appCachePath);
websettings.setAllowFileAccess(true);    // Readable file cache
websettings.setAppCacheEnabled(true);    //Turn on the H5(APPCache) caching function
Step 3: Writing Data
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 +"');");
        }
    }
Note: It must be written in the onPageFinished method to be valid.

This implements the function of sharing data between app and H5 using LocalStorage.

Keywords: Android Javascript less html5

Added by speckledapple on Wed, 22 May 2019 22:07:45 +0300