上传至服务器时用localStorage传图片数组是否为最优方案？

首先明确：你当前用localStorage传递图片数组的方式不算最优方案，但也不会给页面带来明显负载——毕竟只是存储一个图片路径数组，数据量极小，对性能几乎没影响。它的问题主要在逻辑合理性和兼容性上，而非负载：

1. localStorage是持久化存储，数据会一直留在用户浏览器里，除非主动清除。如果用户之后直接访问page1.html，会加载上次存储的旧数组，不符合你“点击链接才加载对应图片”的需求。
2. 若用户浏览器禁用了localStorage，整个功能会直接失效。

至于你去掉localStorage后功能失效，原因很简单：页面跳转（window.location.href）会销毁原页面的JS上下文，所有变量都会丢失，必须通过跨页面传递机制才能把数据带到新页面。

下面是两种更适合你场景的替代方案：

方案1：URL参数传递编码后的图片数组（适合动态生成的数组） #

直接把图片数组转成JSON并编码后拼到URL里，新页面从URL参数读取数据，不需要依赖本地存储。

修改原logic.js的changeImages函数： #

var liquidityImages = ["Images/xxx.jpg", "Images/yyy.jpg"];
var structureImages = ["Images/aaa.jpg"];
var sndImages = ["images/bbb.jpg", "images/ccc.jpg"];

// Function to change images
function changeImages(imagesArray) {
  // 将数组转为JSON并编码，避免URL特殊字符问题
  const encodedImages = encodeURIComponent(JSON.stringify(imagesArray));
  // 跳转到带参数的page1.html
  window.location.href = `page1.html?images=${encodedImages}`;
}

修改page1.html的图片追加代码： #

document.addEventListener('DOMContentLoaded', function () {
  // 从URL参数中获取编码后的图片数组
  const urlParams = new URLSearchParams(window.location.search);
  const encodedImages = urlParams.get('images');
  // 解码并解析为数组，没有参数则用空数组
  const selectedImages = encodedImages ? JSON.parse(decodeURIComponent(encodedImages)) : [];
  
  changeImages(selectedImages);
});

function changeImages(imagesArray) {
  const imageContainer = document.getElementById('image-container');
  imageContainer.innerHTML = "";

  for (let i = 0; i < imagesArray.length; i++) {
    const imgElement = document.createElement("img");
    imgElement.src = imagesArray[i];
    imgElement.alt = `Image ${i + 1}`;
    imageContainer.appendChild(imgElement);
  }
}

方案2：URL参数传递标识（适合固定的图片数组，更推荐） #

如果你的liquidityImages、structureImages这些数组是固定不变的，完全不需要传递整个数组，只传一个标识（比如liquidity、structure），新页面根据标识加载预设的数组即可。这种方式数据量极小，完全没有URL长度限制问题。

修改原logic.js的调用逻辑： #

var liquidityImages = ["Images/xxx.jpg", "Images/yyy.jpg"];
var structureImages = ["Images/aaa.jpg"];
var sndImages = ["images/bbb.jpg", "images/ccc.jpg"];

// 点击链接时调用这个函数，传入对应标识
function goToImagePage(type) {
  window.location.href = `page1.html?type=${type}`;
}

// 示例：比如点击liquidity链接时调用 goToImagePage('liquidity')

修改page1.html的代码： #

// 预设所有图片集合
const imageSets = {
  liquidity: ["Images/xxx.jpg", "Images/yyy.jpg"],
  structure: ["Images/aaa.jpg"],
  snd: ["images/bbb.jpg", "images/ccc.jpg"]
};

document.addEventListener('DOMContentLoaded', function () {
  const urlParams = new URLSearchParams(window.location.search);
  const type = urlParams.get('type');
  // 根据标识获取对应数组，没有则用空数组
  const selectedImages = imageSets[type] || [];
  
  changeImages(selectedImages);
});

function changeImages(imagesArray) {
  const imageContainer = document.getElementById('image-container');
  imageContainer.innerHTML = "";

  for (let i = 0; i < imagesArray.length; i++) {
    const imgElement = document.createElement("img");
    imgElement.src = imagesArray[i];
    imgElement.alt = `Image ${i + 1}`;
    imageContainer.appendChild(imgElement);
  }
}

方案对比 #

根据你的场景，方案2是最优选择；如果图片数组是动态生成的，再考虑方案1。

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