如何正确在本地存储中保存与展示图片？React+Redux项目实践

背景 #

我目前在使用JavaScriptServices的React+Redux模板开发应用，核心需求是调用一个返回Base64格式用户头像的API，并且要通过本地存储缓存头像，避免重复发起API请求。

具体实现步骤 #

1. 调用API获取Base64头像 #

这里是我实际项目中用来调用接口的代码（基于fetch实现，你也可以换成axios等请求库）：

// 异步获取用户头像的API调用函数
const fetchUserAvatar = async (userId) => {
  try {
    const response = await fetch(`/api/users/${userId}/avatar`);
    // 接口直接返回纯Base64格式的字符串
    const base64Avatar = await response.text();
    // 获取成功后自动存入本地存储
    saveAvatarToLocalStorage(userId, base64Avatar);
    return base64Avatar;
  } catch (error) {
    console.error('获取用户头像失败:', error);
    // 返回空值，后续用默认头像兜底
    return null;
  }
};

2. 保存头像到本地存储的工具函数 #

为了方便复用，我封装了一个专门处理本地存储写入的函数：

/**
 * 将Base64格式的头像存入localStorage
 * @param {string} userId - 用户唯一标识，避免不同用户头像冲突
 * @param {string} base64Avatar - Base64格式的头像字符串
 */
const saveAvatarToLocalStorage = (userId, base64Avatar) => {
  if (!userId || !base64Avatar) return;
  localStorage.setItem(`user_avatar_${userId}`, base64Avatar);
};

3. 从本地存储读取头像的工具函数 #

在需要展示头像的场景，优先从本地缓存读取，没有数据时再触发API请求：

/**
 * 从localStorage获取用户头像
 * @param {string} userId - 用户唯一标识
 * @returns {string|null} Base64头像字符串或null
 */
const getAvatarFromLocalStorage = (userId) => {
  return localStorage.getItem(`user_avatar_${userId}`);
};

4. 在React组件中展示头像 #

拿到Base64字符串后，直接作为img标签的src属性即可，同时加上兜底的默认头像：

import React, { useState, useEffect } from 'react';

const UserAvatar = ({ userId }) => {
  // 先从本地缓存取头像数据
  const localAvatar = getAvatarFromLocalStorage(userId);
  const [avatar, setAvatar] = useState(localAvatar);

  // 本地无数据时，调用API获取并更新状态
  useEffect(() => {
    if (!localAvatar) {
      fetchUserAvatar(userId).then(fetchedAvatar => setAvatar(fetchedAvatar));
    }
  }, [userId, localAvatar]);

  // 兜底的默认头像路径
  const fallbackAvatar = '/assets/default-avatar.png';
  const avatarSrc = avatar ? `data:image/png;base64,${avatar}` : fallbackAvatar;

  return (
    <img
      src={avatarSrc}
      alt={`用户${userId}的头像`}
      style={{ width: '80px', height: '80px', borderRadius: '50%', objectFit: 'cover' }}
    />
  );
};

export default UserAvatar;

当前状态 #

目前整个流程运行一切正常，既满足了头像的正常展示需求，又通过本地存储有效减少了不必要的API请求，优化了应用的性能和用户体验。

内容的提问来源于stack exchange，提问作者Oscar Cabrera Rodríguez