页面重载后图片消失：LocalStorage存储图片的代码问题排查

我正在开发支持图片上传的网站，希望将上传图片存储在LocalStorage中，实现页面刷新后图片不丢失。目前有两段JavaScript代码：一段仅能存储单个图片键值对，另一段尝试存储多个键值对，但刷新后图片虽在LocalStorage中却无法在页面显示。

仅支持单图片存储的代码 #

function refresh() {
    window.location.reload();
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList 对象

    for (var i = 0, f; (f = files[i]); i++) {
        // 仅处理图片文件
        if (!f.type.match("image.*")) {
            continue;
        }

        var reader = new FileReader();

        // 闭包捕获文件信息
        reader.onload = (function (theFile) {
            return function (e) {
                // 渲染缩略图
                var span = document.createElement("span");
                span.innerHTML = ['<img class="image" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join("");
                document.getElementById("list").insertBefore(span, null);
                localStorage.setItem('img', e.target.result);
            };
        })(f);
        // 以Data URL形式读取图片文件
        reader.readAsDataURL(f);
    }
}
document.getElementById("upload-button").addEventListener("change", handleFileSelect, false);

// 页面加载时恢复图片
if (localStorage.img) {
    var span = document.createElement("span");
    span.innerHTML += ['<img class="img" src="', localStorage.img, '" title=""/>'].join("");
    document.getElementById("list").insertBefore(span, null);
}

多图片存储但刷新后不显示的问题代码 #

function refresh() {
  window.location.reload();
}

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList 对象

  for (var i = 0, f; (f = files[i]); i++) {
    // 仅处理图片文件
    if (!f.type.match("image.*")) {
      continue;
    }

    var reader = new FileReader();
    var counter = 0;

    // 闭包捕获文件信息
    reader.onload = (function (theFile) {
      return function (e) {
        // 渲染缩略图
        var span = document.createElement("span");
        span.innerHTML = [
          '<img class="image" src="',
          e.target.result,
          '" title="',
          escape(theFile.name),
          '"/>'
        ].join("");
        document.getElementById("list").insertBefore(span, null);
        counter++;
        var suma = "img" + counter;
        localStorage.setItem(suma, e.target.result);
      };
    })(f);
    // 以Data URL形式读取图片文件
    reader.readAsDataURL(f);
  }
}
document
  .getElementById("upload-button")
  .addEventListener("change", handleFileSelect, false);

// 核心问题：localStorage.suma不存在，无法读取任何图片数据
if (localStorage.suma) {
  var span = document.createElement("span");
  span.innerHTML += [
    '<img class="img" src="',
    localStorage.suma,
    '" title=""/>'
  ].join("");
  document.getElementById("list").insertBefore(span, null);
}

问题分析与修复方案 #

问题点 #

1. counter变量定义在循环内部，每次循环都会重置为0，导致所有图片都会被存入img1键下，覆盖之前的图片。
2. 页面加载时尝试读取localStorage.suma，但suma只是临时变量，并未存入LocalStorage，因此无法获取到任何图片数据。

修正后的多图片存储代码 #

function refresh() {
    window.location.reload();
}

function handleFileSelect(evt) {
    var files = evt.target.files;
    // 获取当前已存储的图片数量，避免覆盖已有图片
    var imgCount = getStoredImageCount();

    for (var i = 0, f; (f = files[i]); i++) {
        if (!f.type.match("image.*")) {
            continue;
        }

        var reader = new FileReader();
        // 捕获当前图片的唯一索引
        var currentIndex = imgCount + i + 1;

        reader.onload = (function (theFile, index) {
            return function (e) {
                // 渲染缩略图
                var span = document.createElement("span");
                span.innerHTML = ['<img class="image" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join("");
                document.getElementById("list").insertBefore(span, null);
                // 用唯一键存储图片
                localStorage.setItem('img' + index, e.target.result);
            };
        })(f, currentIndex);

        reader.readAsDataURL(f);
    }
}

// 统计LocalStorage中已存储的图片数量
function getStoredImageCount() {
    var count = 0;
    for (var key in localStorage) {
        if (key.startsWith('img')) {
            count++;
        }
    }
    return count;
}

// 页面加载时恢复所有存储的图片
function restoreImages() {
    var list = document.getElementById("list");
    for (var key in localStorage) {
        if (key.startsWith('img')) {
            var imgData = localStorage.getItem(key);
            var span = document.createElement("span");
            span.innerHTML = ['<img class="image" src="', imgData, '" title=""/>'].join("");
            list.insertBefore(span, null);
        }
    }
}

document.getElementById("upload-button").addEventListener("change", handleFileSelect, false);
// 页面加载完成后自动恢复图片
window.onload = restoreImages;

修复说明 #

1. 新增getStoredImageCount函数，统计LocalStorage中以img开头的键数量，确保新上传的图片使用唯一键存储，不会覆盖已有数据。
2. 页面加载时通过restoreImages函数遍历所有图片键，逐个恢复并渲染图片。
3. 调整闭包逻辑，将图片的唯一索引传入闭包，保证每个图片对应独立的存储键。

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