android webview配合Html5数据操作

最新推荐文章于 2024-07-14 14:30:45 发布

一鱼浅游

最新推荐文章于 2024-07-14 14:30:45 发布

阅读量1k

点赞数

文章标签： webview html5

本文链接：https://blog.csdn.net/Jhone_csdn/article/details/46535553

版权

android 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在webview开发中，有对html5页面数据操作的需要，那么如何实现数据的保存与读取，以及清空删除呢？
用到localStorage API，具实现看代码
一、页面准备
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>这是页面A</div>
        <a href="second.html">去B页面</a>
    </body>
    <script>
        window.localStorage.setItem('item1','这是第一项数据');
        window.localStorage.setItem('item2','这是第二项数据');
    </script>
</html>

second.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>这是页面B</div>
        <p id="ids">p</p>
    </body>
    <script>
        var p=document.getElementById("ids");
        var item1=window.localStorage.getItem('item1');
        var item2=window.localStorage.getItem('item2');
        p.innerHTML=item1+"; "+item2;
    </script>
</html>

webview实现

private  void initWebView() {
            // TODO Auto-generated method stub
            String URL="http://192.168.0.100:8020/html5/index.html";
            webView.getSettings().setJavaScriptEnabled(true);
            //设置缓存相关设置
            webView.getSettings().setDomStorageEnabled(true);   
            webView.getSettings().setAppCacheMaxSize(1024*1024*8);  
            String appCachePath = context.getCacheDir().getAbsolutePath(); 
            webView.getSettings().setAppCachePath(appCachePath);  
            webView.getSettings().setAllowFileAccess(true);  
            webView.getSettings().setAppCacheEnabled(true);

            webView.setWebViewClient(new WebViewClient(){

                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    // TODO Auto-generated method stub
                    Log.v(TAG, "shouldOverrideUrlLoading");
                    return super.shouldOverrideUrlLoading(view, url);
                }

                @Override
                public void onPageStarted(WebView view, String url,
                        Bitmap favicon) {
                    // TODO Auto-generated method stub
                    Log.v(TAG, "onPageStarted");
                    super.onPageStarted(view, url, favicon);
                }

                @Override
                public void onPageFinished(WebView view, String url) {
                    // TODO Auto-generated method stub
                    Log.v(TAG, "onPageFinished");
                    super.onPageFinished(view, url);
                }

            });

            webView.loadUrl(URL);
        }

这种方法在多个activity中多个webview的情况下，保存的东西好像不能同步，也就是在webview1中设置值，在webview2中有可能取不到，这个具体还不知道怎么解决，但是有另外一种方法解决这种需求：
https://github.com/didimoo/AndroidLocalStorage

另外介绍下LoalStorage的几个api

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。
HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

有用到这个需求可以猛戳
http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

一鱼浅游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
android webview配合Html5数据操作

在webview开发中，有对html5页面数据操作的需要，那么如何实现数据的保存与读取，以及清空删除呢？用到localStorage API，具实现看代码一、页面准备 index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </
复制链接

扫一扫