HTML5本地存储之Web Storage详解

        //用data url的形式取出   
        img.crossOrigin = "*"; //防止跨域取照片出错   
        var imgAsDataURL = imgCanvas.toDataURL("image/png");   
  
        //保存到本地存储中   
        try{   
            localStorage.setItem(key, imgAsDataURL);   
        }   
        catch(e){   
            alert("保存失败！请重试。。。");   
        }   
  
        }, false);   
        img.src = src;   
    }   
  

该函数接收两个参数，一个是key值，还有一个是图片的路径，通过setImg(“img1”,”1.jpg”)保存图片到localStorage，我们可以查看Local Storage的存储情况：

获取并显示的代码函数如下：

JavaScript Code复制内容到剪贴板

function getImg(key){   
        var srcStr = localStorage.getItem(key);   
        var imgObj = document.createElement(‘img’);   
        imgObj.src = srcStr;   
        document.body.appendChild(imgObj);   
    }   
  

该函数只接收一个参数：需要查找图片的key值：