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);  
			}
		}
	});
}