您的位置：首页 > 移动开发 > Android开发

android webview配合Html5数据操作

2015-06-17 16:52 441 查看

在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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webview html5

相关文章推荐

新的分享

章节导航