Javascript Google Plus图像缓存

我有一个webapp，可以显示不同用户的Google+个人资料图片。 我刚刚遇到一个错误，说“超过403速率限制”，我的webapp上的所有图像都被破坏了

注意：我注意到几分钟后这个错误消失了

我不想让用户在访问我的webapp时看到损坏的图像，所以我想将这些图像缓存在HTML5本地存储中，但我不确定这是否有帮助

假设我有一张图片（注意：我的网页上有几个不同用户的图片）

. . . 其他html。
JavaScript

还有一些JavaScript，在图像加载完成后将其保存到localstorage。下次用户访问页面时，浏览器将在JavaScript有机会检查图像是否存在于localstorage之前向“/url\u to\u g+\u dp”发出请求。这样，即使我实现缓存，它也不会在很大程度上帮助我

如果我错了，请纠正我

欢迎提出建议

---

干杯：）

缓存将有所帮助，但不是您建议的方式。不要使用img标记，使用其他东西并设置dom属性，这样您就知道要加载什么。稍后找到所有这些元素并用imeg替换它们，使用适当的url（缓存或未缓存）

我不确定在外部域上查看Google+配置文件图像的带宽限制是多少，但您的方法似乎至少可以在遇到403错误之前为您争取一些时间

您可能只想使用javascript加载图像数据

首先为图像指定一个id并清空src属性：

<img id='profile-img' src=''>

然后始终使用javascript加载图像。（我认为localStorage不允许您存储二进制数据，因此您需要在存储图像之前对其进行base64编码）：

var剖面图；
if（localStorage.getItem（'profile\u image'））{
//如果图像已在本地存储，则使用它
profile\u img=localStorage.getItem（'profile\u image'）；
}
否则{
//抓取google+个人资料图像并将其存储在本地
profile_img=[base64编码图像来自谷歌+]；//我不知道你想如何实现这一点。
setItem（'profile\u image'，profile\u img）；
}
document.getElementById（“profile img”）.src='data:image/png；base64，“+profile_img；

403的具体位置在哪里？从http请求获取实际图像文件？或者在api请求中获取图像URL？其他地方？从实际图像文件的http请求

<img id='profile-img' src=''>

<script>
    var profile_img;

    if ( localStorage.getItem('profile_image')) {
         //if the image is already locally stored then use it
         profile_img = localStorage.getItem('profile_image');
    }
    else {
         //grab the google + profile image and store it locally
         profile_img = [base64 encoded image from google +]; //i'm not sure off of the top of my head how you would want to go about accomplishing this.
         localStorage.setItem('profile_image',profile_img);
    }

    document.getElementById("profile-img").src='data:image/png;base64,' + profile_img;
</script>