如何将图片保存到localStorage？求代码解决方案

我是前端开发新手，正尝试将多张图片保存到localStorage，但现有代码无法实现该功能，恳请帮忙排查修改。

现有代码 #

HTML代码 #

<div class="images-grid">
<div class="upload">
    <div class="round" id="display-image">
    <input type="file" id="image-input" accept="image/jpeg, image/png, image/jpg">
    <i class = "fa fa-camera" style = "color: #000;"></i>
    </div>
  </div>
  <div class="upload">
    <div class="round" id="display-image2">
    <input type="file" id="image-input2" accept="image/jpeg, image/png, image/jpg">
    <i class = "fa fa-camera" style = "color: #000;"></i>
    </div>
  </div>
</div>

JavaScript代码 #

const image_input = document.querySelector("#image-input");

image_input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    const uploaded_image = reader.result;
    document.querySelector("#display-image").style.backgroundImage = `url(${uploaded_image})`;
  });
  reader.readAsDataURL(this.files[0]);
});

const image_input2 = document.querySelector("#image-input2");

image_input2.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    const uploaded_image = reader.result;
    document.querySelector("#display-image2").style.backgroundImage = `url(${uploaded_image})`;
  });
  reader.readAsDataURL(this.files[0]);
});

问题分析与修改方案 #

现有代码仅实现了图片即时预览，完全缺失保存到localStorage和页面刷新后读取显示的核心逻辑，同时代码存在大量重复，可优化复用性。

修改后的完整JavaScript代码 #

// 封装通用图片处理函数，避免重复代码
function initImageUpload(inputSelector, displaySelector, storageKey) {
  const input = document.querySelector(inputSelector);
  const displayArea = document.querySelector(displaySelector);

  // 页面加载时，从localStorage读取已保存的图片并显示
  const savedImageData = localStorage.getItem(storageKey);
  if (savedImageData) {
    displayArea.style.backgroundImage = `url(${savedImageData})`;
  }

  // 监听文件选择事件
  input.addEventListener("change", function() {
    if (!this.files[0]) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const imageData = e.target.result;
      // 更新页面预览
      displayArea.style.backgroundImage = `url(${imageData})`;
      // 将图片数据存入localStorage
      localStorage.setItem(storageKey, imageData);
    };
    reader.readAsDataURL(this.files[0]);
  });
}

// 初始化两个图片上传控件
initImageUpload("#image-input", "#display-image", "uploaded_image_1");
initImageUpload("#image-input2", "#display-image2", "uploaded_image_2");

关键说明 #

• 新增了localStorage.setItem()逻辑，将图片的base64格式数据存入本地存储，每个图片对应唯一的key避免冲突
• 页面初始化时通过localStorage.getItem()读取已保存的图片，实现刷新后仍能显示
• 封装通用函数减少重复代码，后续新增图片上传控件只需调用一次函数即可
• 注意：localStorage存储容量有限（约5MB），高分辨率图片会占用较多空间，若需大量存储建议使用IndexedDB或后端存储方案

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