android WebView和JS交互本地存储

最新推荐文章于 2023-01-29 17:36:31 发布

时间去旅行

最新推荐文章于 2023-01-29 17:36:31 发布

阅读量965

点赞数

分类专栏： android 文章标签： android webview 存储

本文链接：https://blog.csdn.net/sourcespro/article/details/71194704

版权

android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、activity_main.xml

<WebView
        android:id="@+id/main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

二、MainActivity.java

    Context mContext;

    private WebView mWebView;
    private SharedPreferences.Editor editor;
    private SharedPreferences pref;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getApplicationContext();

        //初始化存储
        pref = MainActivity.this.getSharedPreferences("data",MODE_PRIVATE);
        editor = pref.edit();
        setContentView(R.layout.activity_main);
        //加载页面
        mWebView = (WebView) findViewById(R.id.main_webview);
        //允许webview执行javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        //支持通过JS打开新窗口
        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        // 浏览器支持多窗口显示
        mWebView.getSettings().setSupportMultipleWindows(true);
        // 页面是否可以进行缩放
        mWebView.getSettings().setSupportZoom(false);
        // 使用WebViewClient的特性处理html页面
        mWebView.setWebViewClient(new WebViewClient());
        // 使用WebChormClient的特性处理html页面
        mWebView.setWebChromeClient(new WebChromeClient());

        //加载本地网页 app/src/main/assets
        mWebView.loadUrl("file:///android_asset/index.html");
        //加载外部网页
        //mWebView.loadUrl("http://www.baidu.com");

        //暴露方法
        mWebView.addJavascriptInterface(new Storage(),"Storage");
    }

三、Storage.java

private class Storage {

        /**
         * 存储key - value
         * @param key
         *      要存储的key
         * @param value
         *      要存储的value
         * @return
         *      0 成功 -1失败
         */
        @JavascriptInterface
        public String setItem(String key, String value) {
            Log.i("js","Storage.setItem("+key+","+value+")");
            try {
                editor.putString(key, value);
                editor.commit();
                return "0";
            } catch (Exception e) {
                e.printStackTrace();
            }
            return "-1";
        }

        /**
         * 通过key 取 value值
         * @param key
         *      key
         * @return
         *      value
         */
        @JavascriptInterface
        public String getItem(String key) {
            Log.i("js","Storage.getItem("+key+")");
            return pref.getString(key, "no result");
        }

        /**
         * 根据key值删除记录
         * @param key
         *      key
         * @return
         *      0 成功 -1失败
         */
        @JavascriptInterface
        public String removeItem(String key) {
            Log.i("js","Storage.delItem("+key+")");
            try {
                editor.remove(key);
                editor.commit();
                return "0";
            } catch (Exception e) {
                e.printStackTrace();
            }
            return "-1";
        }

        /**
         * 清空所有存储
         * @return
         *      0 成功 -1失败
         */
        @JavascriptInterface
        public String clear() {
            Log.i("js","Storage.clear()");
            try {
                editor.clear();
                editor.commit();
                return "0";
            } catch (Exception e) {
                e.printStackTrace();
            }
            return "-1";
        }
    }

四、index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>
<body>

<button id="d1">Storage.setItem()</button>
<br/><br/>

<button id="d2">Storage.getItem()</button>
<br/><br/>

<button id="d3">Storage.removeItem()</button>
<br/><br/>

<button id="d4">Storage.clear()</button>
<br/><br/>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#d1').click(function(){
            var ret = Storage.setItem('name','张三');
            alert(ret);
        })
        $('#d2').click(function(){
            var ret = Storage.getItem('name');
            alert(ret);
        })
        $('#d3').click(function(){
            var ret = Storage.removeItem('name');
            alert(ret);
        })
        $('#d4').click(function(){
            var ret = Storage.clear();
            alert(ret);
        })
    })
</script>
</body>
</html>