Question

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

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

我不希望用户在访问我的webapp时获取损坏的图像，因此我想将这些图像缓存在HTML5 localstorage中，但我不确定它是否有帮助。

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

<img src='/url_to_g+_dp'>
. . . other html . . .
<script>JavaScript</script>

和一些JavaScript在完成加载后将图像保存到localstorage。用户下次访问该页面时，浏览器会在JavaScript有机会检查图像是否存在于localstorage之前向'/ url_to_g + _dp'发出请求。这样，即使我实现了缓存，它也无法在很大程度上帮助我。

如果我错了，请纠正我。

欢迎提出建议。

干杯：）

Answer 1

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

Answer 2

我不确定在外部域上查看Google +个人资料图片的带宽限制是什么，但在遇到403错误之前，您的方法至少会花一些时间购买。

您可能只想使用javascript来加载图片数据。

首先给你的图像一个id并清空src属性：

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

然后总是用你的javascript加载图像。（我不相信localStorage会允许您存储二进制数据，因此您需要在存储之前对图像进行base64编码）：

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

Google Plus图片缓存

2 个答案: