JS头像刷新丢失：如何将图片转为URL存入localStorage？

核心思路 #

localStorage仅支持存储字符串，因此需要将图片文件转换为Data URL（Base64编码的字符串格式）后存入本地存储；页面加载时读取该字符串，即可还原显示头像。

实现步骤 #

1. 处理图片选择并转换存储

监听文件选择控件的change事件，通过FileReader将选中的图片转为Data URL，同时存入localStorage并实时更新页面头像：

// 获取DOM元素
const avatarInput = document.getElementById('avatar-input');
const avatarImg = document.getElementById('avatar-img');

// 监听图片选择操作
avatarInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const avatarDataUrl = event.target.result;
    // 存入localStorage
    localStorage.setItem('userAvatar', avatarDataUrl);
    // 实时更新页面头像
    avatarImg.src = avatarDataUrl;
  };
  // 以Data URL格式读取文件
  reader.readAsDataURL(selectedFile);
});

2. 页面加载时恢复头像

在页面DOM加载完成后，检查localStorage中是否有保存的头像数据，若存在则直接渲染：

window.addEventListener('DOMContentLoaded', () => {
  const savedAvatar = localStorage.getItem('userAvatar');
  const avatarImg = document.getElementById('avatar-img');
  if (savedAvatar) {
    avatarImg.src = savedAvatar;
  }
});

注意事项 #

• Data URL的体积比原图片大30%左右，建议限制上传图片大小（比如不超过1MB），避免占用过多本地存储空间
• 如需清除已保存的头像，执行localStorage.removeItem('userAvatar')，同时将avatarImg.src设为默认头像地址

内容的提问来源于stack exchange，提问作者Maria