HTML5本地缓存

      这个实现难点在缓存图片上。html代码的缓存对你来说不是问题吧。基于这个前提，
下面这个方案是我自己做的，也具体在项目实现了。思路是这样的：
第1步、先获取html页面里所有图片地址。
方法一：离线获取获取到html代码。html代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的所有img标签url。如果是相对url，就加上host。如果是绝对url，就直接下载。这样这个页面里的所有图片路径都拿到了。
方法一的获取img标签url的正则表达式：
NSString *urlPattern = @"<img[^>]+?src=[\"']?([^>'\"]+)[\"']?";

方法二：通过webview和js 本地程序的交换，获取到html页面所有图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下：

Objective C code ?

1 2 3 4 5 6 7 8 9 10 11

//获取web里的所有的img url - ( NSString  *)createImgArrayJavaScript{      NSString  *js = @ "var imgArray = document.getElementsByTagName('img'); var imgstr = ''; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ';';} return imgstr; } f();" ;      return  js; }   //返回web img图片的数量 - ( NSString  *)createGetImgNumJavaScript{      NSString  *js = @ "var imgArray = document.getElementsByTagName('img');function f(){ var num=imgArray.length;return num;} f();" ;      return  js; }

第2步、把下载图片到本地，把本地的图片设置到html代码中去显示。
通过上面说的两个方法，你可以获取到图片地址了并且能下载到本地了。那没网络的情况下怎么把这些图片再设置到html页面里呢？
方法：下载到本地的图片命名一律使用图片url的md5。因为url直接做不了图片的名称。 
下面这段代码演示了下载图片和设置本地图片的全过程。代码的逻辑是：有本地图片，就显示本地图片，如果没有则从网络获取。还有对应的js代码。设置图片是还判断图片的宽度，大于300时，就等比例缩小。

Objective C code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

- ( void )downLoadImageFromURL:( NSArray * )imageUrlArray {      dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0ul);      dispatch_group_t group = dispatch_group_create();            for  ( int  i = 0; i < imageUrlArray.count; i++)      {          NSString  *imageUrl = [imageUrlArray objectAtIndex:i];          NSString  *key = [imageUrl MD5Hash];          NSData  *data = [FTWCache objectForKey:key];          NSURL  *imageURL = [ NSURL  URLWithString:imageUrl];          NSString  *index = [ NSString  stringWithFormat:@ "%d" , i];            if  (data) {              [_detailWebView stringByEvaluatingJavaScriptFromString:[ self  createSetImageUrlJavaScript:index                                                                                                imgUrl:key]];                        } else {              dispatch_group_async(group, queue, ^{               NSData  *data = [ NSData  dataWithContentsOfURL:imageURL];               if  (data !=  nil ) {                   [FTWCache setObject:data forKey:key];                   dispatch_sync(dispatch_get_main_queue(), ^{                       [_detailWebView stringByEvaluatingJavaScriptFromString:[ self  createSetImageUrlJavaScript:index                                                                                                         imgUrl:key]];                                                                    DDLOG(@ "image i %d" ,i);                   });                                   }          });                    }      }            dispatch_group_notify(group, dispatch_get_main_queue(), ^{          //这里是所有图片下载完成后执行的操作。      });            dispatch_release(group); }   //设置下载完成的图片到web img - ( NSString  *)createSetImageUrlJavaScript:( NSString  *) index imgUrl:( NSString  *) url{      NSData  *imageData = [FTWCache objectForKey:url];      UIImage   *image = [ UIImage  imageWithData:imageData];      int  imageWidth = 300;      int  imageHeight = image.size.height*300.0f/image.size.width;      NSString  *js = [ NSString  stringWithFormat:@ "var imgArray = document.getElementsByTagName('img'); imgArray[%@].src=\"%@\"; imgArray[%@].width=\"%d\";imgArray[%@].height=\"%d\" ;"  , index, url, index,imageWidth,index,imageHeight];      return  js; }