How can Android write a value onto HTML5 localstorage?

Question

I have a webview android application which opens a web page containing some HTML5/ JavaScript code. I want to pass some values from the android side of my application to the browser side. So I thought to write onto HTML5 localstorage from Android and then the Javascript part of the web page reads the value from the localstorage.

How can Android webview write onto the HTML5 localstorage?

Or is there at all a way the android can pass some values to javascript of the page it loads? ( without having to reload the entire page) Say writing something onto HTML5 localstorage and then the javascript code reads that thing from HTML5 localstorage

its different from how to pass json formatted data from a webview to a html page. I need a way of writing onto HTML5 localstorage by android

Possible duplicate of How to pass JSON-formatted data from a WebView to a HTML page — petey
– petey, Commented May 18, 2017 at 17:43

Alex Nikulin · Accepted Answer · 2023-07-21 08:56:49Z

23

+25

Pass variables like a string stackoverflow post:

   webView.getSettings().setJavaScriptEnabled(true);
   webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
               String key = "hello";
               String val = "world";
               if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
                   webView.evaluateJavascript("localStorage.setItem('"+ key +"','"+ val +"');", null);
               } else {
                   webView.loadUrl("javascript:localStorage.setItem('"+ key +"','"+ val +"');");
               }
            }
   });

The second variant is to use JavaScriptInterface

Init section

 JavaScriptInterface jsInterface = new JavaScriptInterface(this);
 webView.getSettings().setJavaScriptEnabled(true);
 webView.addJavascriptInterface(jsInterface, "JSInterface");

JavaScriptInterface

  public class JavaScriptInterface {
        private Activity activity;
    
        public JavaScriptInterface(Activity activiy) {
            this.activity = activiy;
        }
    
        public string getData(String someParameter){
           //also you can return json data as string  and at client side do JSON.parse
           if (someParameter == "give me data" && this.activity.data != null) {
                return this.activity.data;
           }else{
                return null;
           }
        }
    }

Js section

<script>
  function ready() {
        var data = window.JSInterface.getData("give me data");
        localStorage.put("give me data", data)
  };

  document.addEventListener("DOMContentLoaded", ready);
</script>

edited Jul 21, 2023 at 8:56

answered Jun 26, 2017 at 6:29

Alex Nikulin

8,7774 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KSK Over a year ago

How to get JSInterface if website is in angular (typescript)?

Baala Over a year ago

I am getting below exception java.lang.RuntimeException: Stub! at android.content.Context.<init>(Context.java:4) at android.content.ContextWrapper.<init>(ContextWrapper.java:5) at android.view.ContextThemeWrapper.<init>(ContextThemeWrapper.java:5) at android.app.Activity.<init>(Activity.java:6) at main.java.tools.MyWebView.<init>(MyWebView.java:8)

Baala Over a year ago

@AndréLuizReis - Can you please share the code snippet. Currently looking to pass local storage value for appium test

pratik vekariya Over a year ago

@Alex Nikulin hellooo, could you please help me at stackoverflow.com/questions/63498385/… similar with this

paulcab · Accepted Answer · 2017-06-29 06:34:28Z

2

How can Android webview write onto the HTML5 localstorage?

   localStorage.setItem("data", value);

Note: With local storage, web applications can store data locally within the user's browser. HTML local storage; better than cookies.
Try addJavaScriptInterface() to bind your android class and webpage.

edited Jun 29, 2017 at 6:34

answered Jun 26, 2017 at 6:35

paulcab

1,1121 gold badge9 silver badges18 bronze badges

Comments

Mehtab · Accepted Answer · 2017-05-19 12:03:31Z

-3

You can do it by Location Hash Property of javascript..

Android Code may look like this

WebView myWebView = (WebView) findViewById(R.id.myWebView);  
myWebView.loadUrl("http://www.example.com/#any_value");
myWebView.setWebViewClient(new MyWebViewClient());

And Javascript code look like this

var x = location.hash; //this will access the hash value you pass in url
localStorage.setItem("save_my_value", x);

answered May 19, 2017 at 12:03

Mehtab

4835 silver badges17 bronze badges

3 Comments

Waterfr Villa Over a year ago

Its not working! I wand android transferring some data, like some string, the js code i wrote in that html page, not the other way around

Waterfr Villa Over a year ago

i don't want to reload entire page each time i pass a new value

Alex Nikulin Over a year ago

@WaterfrVilla both variants loadUrl with hash and just url like javascript:, will not reload your page

Collectives™ on Stack Overflow

How can Android write a value onto HTML5 localstorage?

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related