Question

在这个程序中，用户可以上传保存到服务器的个人资料图片，并保存在本地存储中。我将其保存在本地存储中，以便用户在切换选项卡时不必总是下载图像。例如，如果他们从“主页”标签转到“个人资料”标签，再从“主页”标签转到“个人资料”标签，他们将下载相同的图片两次，即每次访问“个人资料”标签时。

我通过在他们第一次下载图像后将图像保存到本地存储来解决这个问题。现在，如果他们再次执行上述场景，它只会下载一次图像，然后每次都从本地存储中抓取它，直到他们关闭网站。我的问题是，我无法弄清楚如何首先检查图像是否存储在本地，如果没有，然后从服务器下载图像并将其保存到本地存储的逻辑。

我尝试执行以下操作，但即使有 catch 块，它也会不断抛出错误。这个 try catch 位于 useEffect() 钩子中。

        try{
          setProfilePic(localStorage.getItem('image'));
        } catch(e) {
          downloadProfilePic();
        }

我还尝试通过检查 localStorage 是否为空，然后我会在本地存储中使用该图像。但是，当用户刷新页面时，blob 的值会发生变化并且无法正确加载图像。这是代码

        if(localStorage.getItem('image') !== null){
          setProfilePic(localStorage.getItem('image'));
        }
        else{
          downloadProfilePic();
        }

感谢任何帮助。

Answer 1

如果我是你，不要尝试用 JavaScript 优化它。相反，让浏览器来处理它——浏览器非常擅长处理和优化这类重复请求。

首先确保您的服务器具有合理的缓存策略 - 例如，确保提供的图像具有在缓存中保留一段时间的标头。然后，您需要做的就是呈现相同的图像链接，并且该图像将恰好下载一次，直到缓存过期。

如果用户在一个选项卡上打开一个带有他们的图像的页面，然后打开另一个选项卡到类似页面的另一个链接到图像，浏览器将不会重新下载图像 - 相反，它会呈现已在其缓存中下载的图像。

所以，你真正需要的是类似的东西

REACT_APP_

并确保 <img src={profilePicSrc} /> 在页面加载/标签页之间没有不同（除非用户通过更改他们的个人资料图片导致更改）。

如何捕获在我的 useEffect 钩子中抛出的错误？

1 个答案: