Android 通过 localstorage 向 HTML5 传参

现在的 APP,Android 与 H5 混合开发已很常见。当 Android 通过 WebView 加载 H5 页面,且需要向其传参时,可以用 loaclstorage 来实现。代码如下:
WebView 先要设置如下属性:

 webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setAppCacheMaxSize(1024*1024*8);
        String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
        webView.getSettings().setAppCachePath(appCachePath);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAppCacheEnabled(true);
        JavaScriptInterface jsInterface = new JavaScriptInterface(this);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(jsInterface, "JSInterface");

然后,传递参数:

   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 +"');");
               }
            }
   });

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 == "transmitData" && this.activity.data) {
                return this.activity.data;
           }else{
                return null;
           }
        }
    }

Js 部分的代码如下:

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

  document.addEventListener("DOMContentLoaded", ready);
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LocalStorageHTML5中的一个新特性,它提供了一种在浏览器中存储数据的方法,数据存储在用户的本地计算机上,即使关闭浏览器,数据也不会丢失。在HTML5中,可以使用localStorage对象来访问和操作LocalStorage。 下面是保存数据到LocalStorage的步骤: 1.创建一个localStorage对象: ```javascript var storage = window.localStorage; ``` 2.使用setItem方法将数据保存到LocalStorage中: ```javascript storage.setItem("key", "value"); ``` 其中,key是要保存的数据的键,value是要保存的数据的值。 3.使用getItem方法从LocalStorage中获取保存的数据: ```javascript var value = storage.getItem("key"); ``` 其中,key是要获取的数据的键。 4.使用removeItem方法从LocalStorage中删除保存的数据: ```javascript storage.removeItem("key"); ``` 其中,key是要删除的数据的键。 完整的代码示例: ```javascript // 创建一个localStorage对象 var storage = window.localStorage; // 保存数据到LocalStorage中 storage.setItem("username", "Tom"); // 从LocalStorage中获取保存的数据 var username = storage.getItem("username"); console.log(username); // 输出:Tom // 从LocalStorage中删除保存的数据 storage.removeItem("username"); ``` 注意事项: 1. localStorage只能存储字符串类型的数据,如果要存储其他类型的数据,需要先将其转换为字符串类型。 2. localStorage的存储容量有限,不同浏览器的容量也不同,一般为5-10MB左右。如果数据量较大,建议使用其他存储方式,如IndexedDB或Web SQL。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值