最近在做一个商城类的网站,其中想到要做图片缓存,刚好看到了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);
}
}
});
}