localStorage的图片缓存

最近在做一个商城类的网站，其中想到要做图片缓存，刚好看到了localStorage就研究了一下。

不过经过几天的探索，发现这个东东其实并不适合做大型网站，特别是有大量图片的网页的缓存，因为它的最大缓存空间只有5M（没记错的话）。

所以要是项目有很多很多图片就放弃这个家伙把。

因为它目前没用所以要被砍掉了，砍掉前，简单将我做的一些前端代码贴出来，以供将来有需要参考：

/*判断是否支持缓存，支持并且存在缓存的情况下，就从缓存中获得图片内容*/if(window.localStorage&&localStorage.getItem('ad_img'+browsing_productId)){$('#loading1').hide();//加载中的圈圈（这是我的一个动态插件可以忽略）var srcStr = localStorage.getItem('ad_img'+browsing_productId);  //这里是从缓存中获得我们保存的内容，键值对的形式var imgObj = document.createElement('img');//创建一个dom元素（图片）imgObj.src = srcStr;  //这里为图片元素的src赋值，可以直接得到图片，到底是个什么东西我就不知道了，可能是流什么的$('#productIntroduction').append(imgObj);//将元素添加到页面中去，就可以得到缓存下来的图片了，经过缓存的加载速度会比从服务器下载快一些/*不支持缓存或者缓存不存在情况下，按照正常流程由服务器获得图片*/}else{$('#productIntroduction').append('<img id="ad_loading" style="display:none" src="/downloadImg.do?fileId='+data.data.product.productFileId+'">');//在图片加载完成后执行的脚本（默认从服务器读取的图片是隐藏的，等加载完毕将加载中的圈圈替换掉）$('#ad_loading').load(function(){$('#loading1').hide();//加载中的圈圈  $('#ad_loading').fadeIn(800);//圈圈淡出效果//判断是否支持缓存，支持，就将图片缓存，不支持不作任何操作if(window.localStorage){localStorage.setItem('product',browsing_productId);……//把你需要的东东存到缓存里，下面是创建一个canvas元素用来存将要缓存的图片var imgCanvas = document.createElement('canvas'),  imgContext = imgCanvas.getContext('2d');  //确保canvas元素的大小和图片的尺寸一致  imgCanvas.width = this.width;  imgCanvas.height = this.height;  //渲染图片到canvas中  imgContext.drawImage(this, 0, 0, this.width, this.height);  //用data url的形式取出  var imgAsDataURL = imgCanvas.toDataURL('image/png');  //保存到本地存储中  try{  localStorage.setItem('ad_img'+browsing_productId, imgAsDataURL);  }catch(e){  console.log('Storage failed: ' + e);  }}});}