需要帮助存储 blob 并将其显示在浏览器中

Question

我正在尝试在 React 组件中显示我用于 API（ALPHA_3 数组）的每个国家/地区代码的图像。 getFlags() 和 appendImg() 在组件中导入并执行，但看起来 imgs 已损坏/不存在。

我找到了一个 API (countryflags.io)，它为我使用的每个国家/地区提供 png - 但它使用 alpha2 命名。 为了获取使用 ALPHA2 的 countryflags API，我对我的 ALPHA_3 数组进行了切片，并对数组中的每个国家/地区代码进行了获取请求。 使用 alpha2 代码作为键和 blob 作为值将所有内容保存到 localestorage。

当我尝试显示 blob 时，它们显示为损坏的图像，我无法弄清楚是什么原因造成的。 另外，有没有更好的方法来存储 blob 或者 localestorage 就好了？

                const ALPHA_3 = [
                'CAD',
                'HKD',
                'ISK',
                'PHP',
                'DKK',
                'HUF',
                'CZK',
                'AUD',
                'RON',
                'SEK',
                'IDR',
                'INR',
                'BRL',
                'RUB',
                'HRK',
                'JPY',
                'THB',
                'CHF',
                'SGD',
                'PLN',
                'BGN',
                'TRY',
                'CNY',
                'NOK',
                'NZD',
                'ZAR',
                'USD',
                'MXN',
                'ILS',
                'GBP',
                'KRW',
                'MYR',
            ];

            const base_url = 'https://www.countryflags.io';
            const opts = { mode: 'no-cors', 'Content-Type': 'image/png' };
            const ALPHA_2 = [];

            const getFlags = () => {
                ALPHA_3.forEach((element) => ALPHA_2.push(element.slice(0, -1)));
                ALPHA_2.forEach((element) => {
                    fetch(base_url + `/${element}/flat/32.png`, opts)
                        .then((response) => response.blob())
                        .then((png) =>
                            localStorage.setItem(`${element}`, URL.createObjectURL(png))
                            
                        );
                });
            };
            export default getFlags;


            export const appendImg = () => {
                Object.values(localStorage).forEach((v) => {
                    let image = document.createElement(`img`);
                    image.src = v;
                    document.body.appendChild(image);
                });
            };

Answer 1

感谢您提醒有关 localestorage 中的有限存储以及 URL.createObjectURL() 在刷新时中断的问题。 我重构了代码以使用缓存 API，并设法将每个速率的 alpah2 代码与响应一起保存为缓存中的键值对，使用 PUT 方法，因为没有cors。 现在我想知道如何从另一个文件/反应组件访问缓存并将其显示在浏览器中。

            const ALPHA_3 = [
            'CAD',
            'HKD',
            'ISK',
            'PHP',
            'DKK',
            'HUF',
            'CZK',
            'AUD',
            'RON',
            'SEK',
            'IDR',
            'INR',
            'BRL',
            'RUB',
            'HRK',
            'JPY',
            'THB',
            'CHF',
            'SGD',
            'PLN',
            'BGN',
            'TRY',
            'CNY',
            'NOK',
            'NZD',
            'ZAR',
            'USD',
            'MXN',
            'ILS',
            'GBP',
            'KRW',
            'MYR',
        ];

        const cacheFlags = async () => {
            const imageCache = await caches.open('imageCache');
            if (imageCache.keys().length >= 32) return false; 
            const base_url = 'https://www.countryflags.io';
            const opts = { mode: 'no-cors', 'Content-Type': 'image/png' };
            const ALPHA_2 = [];
            ALPHA_3.forEach((element) => ALPHA_2.push(element.slice(0, -1)));
            ALPHA_2.forEach((element) => {
                let url = base_url + `/${element}/flat/32.png`;
                fetch(url, opts)
                    .then((response) => {
                        imageCache.put(element, response);
                    })
                    .catch((error) => error);
            });
        };
        export default cacheFlags;