Save data to LocalStorage and then retrieve it using android Java

user_12646362 0
Viewed 2112

I am loading a local web page in my android app using WebView and my web page has one button (lets say "btnA"). When user clicks btnA, javascript function is called which saves deviceID in browser's localstorage.

Now there are couple of things that I would like to ask:

  1. I am showing an alert when deviceID is saved and that alert is working fine in the app but how can I see the deviceID in my phone's browser once it is saved? I am using Chrome in my phone and I tried going to Chrome > Settings > Site Settings > Storage but nothing is there.
  2. When user clicks on btnA, I want to run a background service after every 5 minutes which hits an api and I need to pass the deviceID (stored in a localStorage) as a parameter for the api. How would I get that deviceID from localstorage in my android app so I can pass it as a parameter?

This is how I am loading the webview in the app:

webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_res/raw/index.html");

This is my web page:

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>

<body>
    <button type="submit" value="Click Me" onclick="saveToLocalStorage()">Click Me</button>
    <script src="./app.js" type="text/javascript"></script>
</body>

</html>

and this is my app.js:

function saveToLocalStorage() {
    var generatedString = randomString(9, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
    if(localStorage.getItem("deviceID") == null){
        localStorage.setItem("deviceID", generatedString);
        alert("DeviceID saved.")
    }

}

function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}
webview android javascript
1 Answers

You could create a Javascriptinterface:

public class JavaScriptInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void deviceId(String deviceId) {
        // Do whatever you want with the deviceId
    }
}

And pass it to the webview:

webView.addJavascriptInterface(new JavaScriptInterface(this), "injectedObject");

Then you can send that id to the native app:

<script type="text/javascript">
    function sendDeviceId() {
        injectedObject.deviceId(localStorage.getItem("deviceID"));
    }
</script>

By calling sendDeviceId() from inside the website the native app should receive the stored deviceId. This could be done at the end of saveToLocalStorage() method.

To check the localstorage you can open the website on your smartphone in chrome browser and then connect it to a computer and visit chrome://inspect/#devices from the computer. This should show you opened tabs and there is a link to inspect in there and this will open the website inspector where you can check the local storage with that website in the Application tab.

user_15408540
Related