WebView中你不知道的事localStorage

今天在开发项目的时候碰到一个怪事：本着以为开发webview都是简简单单的事情

首先：实例化webview,启用JavaScript，接着再设置WebViewClient

mWebView = (WebView) findViewById(R.id.webView);

WebSettings settings = mWebView.getSettings();

settings.setJavaScriptEnabled(true);

mWebView.setWebViewClient(new WebViewClient() {

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

}

@Override

public void onPageFinished(WebView view, String url) {

}});
接着：在添加javaScript的一些接口，和html进行交互：

mWebView.addJavascriptInterface(new JavaScriptInterface(), "Android");

public class JavaScriptInterface {

JavaScriptInterface() {

}
@JavascriptInterface

public void postPay(String data) {

}
@JavascriptInterface

public void call(String tel) {

Intent intent=new Intent(Intent.ACTION_DIAL,Uri.parse("tel:"+tel));

startActivity(intent);

}}

最后：在html中这样引用

javascript.Android.postPay("hello wordl!");

一切看起来都没有问题，但是跑起来的时候发现Android写的这个javascript的interface总是调用不到，网上找了找，发现度娘上写的基本上都是和本地的html交互写的javascript的interface,而我的是和服务器上的html做的交互，以为不一样，但是各种百度都发现没有找到想关的资料。

然后又换了种思路，在html中来调试，通过在javascript中一步一步alert去发现问题（tips：要使alert在app上也能显示，webview需要在加一个设置，mWebView.setWebChromeClient(new WebChromeClient());）。最后发现alert卡在了一个地方,这个地方崩溃，所有整个js就出错了，所以就调用不到了。

var lastTm = Number(window.localStorage.getItem("lastOperateTm"));

localStorage看上去是一个本地存储的东西，于是乎我又搜索了webview localStorage。

mWebView.getSettings().setDomStorageEnabled(true);

mWebView.getSettings().setAppCacheMaxSize(1024*1024*8);

String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();

mWebView.getSettings().setAppCachePath(appCachePath);

mWebView.getSettings().setAllowFileAccess(true);

mWebView.getSettings().setAppCacheEnabled(true);

在Android中添加了这些配置，于是乎就成功跑起来了。

然后再查了下html的localStorage(本地存储)，w3c是这样解释的：HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储，sessionStorage - 针对一个 session 的数据存储，之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

而本项目中由于对webview缺少对这个本地存储的设置，导致html中的javascript出现了错误。必须添加上面的设置代码。

总结：html和webview调试还是比较困难的，出了问题都不知道往哪里找，得一步一步的排查，webview中建立本地存储比较少接触，这次让我对webview有了更多的了解。