Web Storage 项目实践
这段代码是从一个项目在摘出来的,主要实现了将一个图片利用canvas的toDataURL这个API转成BASE64编码的字符串(图片要先用drawImage画到canvas上),然后存储到localStorage中。 因为图片数据量大,经常加载会耗费时间,所以可以利用客户端存储缓存起来。 这几个图片主要是图标ICON。
/*Canvas transfer img to Base64 string
Author:Jason
*/
define(function(){
var createStorage=function(imgPath,ele){
this.src=imgPath;//var src="xxx.jpg";
this.ele=ele;
}
createStorage.prototype={
set:function(key,imgType){
var img=document.createElement('img');
//img.setAttribute('crossOrigin','annonymous');
//当图片加载完成时触发回调函数
img.src=this.src;
img.addEventListener('load',function(){
var imgcanvas=document.createElement("canvas");
var imgContext=imgcanvas.getContext("2d");
imgcanvas.style.width="50px";//CANVAS大小
imgcanvas.style.height="50px";
//确保canvas元素的大小和图片尺寸一致
//渲染图片到canvas中 定位以及宽高
// context.drawImage(img,x,y,width,height);
imgContext.drawImage(this,0,0,300,110);
//用data url形式取出
var imgAsDataURL=imgcanvas.toDataURL("image/"+imgType);
//保存到本地存储中
try{
localStorage.setItem(key,imgAsDataURL);//存到localstorage~!
}catch(e){
console.log("Storage failed:"+e);
}
},false);
},
get:function(key){
//从本地缓存取图片并渲染
var flag=true;
while((localStorage.getItem(key)===null)&&flag);
//此处的flag是为了避免浏览器等待过长时间
window.setTimeout(function(){
flag=false;
},3000);
var srcStr=localStorage.getItem(key);
var imgObj=document.createElement('img');
imgObj.src=srcStr;
imgObj.style.width="50px"; //这个会截断图片
imgObj.style.height="60px";
imgObj.style.marginLeft="20px";
//document.body.appendChild(imgObj);
this.ele.appendChild(imgObj);
}
}
return{
createStorage:createStorage
}
});
上面的get方法中,用了一个while循环判断获取的键值是否为null。因为localStorage.getItem(key),如果这个key不存在,返回就是一个null值。 等到setItem成功之后才会返回一个键值。
这么做的原因:前面一篇文章也介绍过了,这个方法其实不同浏览器实现不同,IE是异步的,其他可能是同步的,我们无法保证这一点,而且经过测试Chrome貌似也不是同步的。
另一种做法:
因为while循环肯定是阻塞JS线程的, 利用storage事件来异步触发这个本地存储的读取即 get方法。
在浏览器开发工具的 Application栏可