Storage事件无法触发解决

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栏可