如何生成不重复随机数并在页面刷新后保留值，解决随机图片重复问题

这个问题我之前做类似图片随机展示工具时也碰到过，核心要解决两个关键点：避免重复选中上一次的图片，以及把上次的选择持久化保存下来，页面刷新后能恢复。下面给你具体的实现思路和代码示例：

核心思路拆解 #

1. 记录并排除上次的随机索引：用一个变量存储上一次选中的图片索引，每次生成新随机数时，确保和这个索引不同（当图片数量大于1时）。
2. 持久化存储索引：利用浏览器的localStorage来保存这个索引，它会存在用户的浏览器本地，页面刷新、甚至关闭浏览器再打开都能读取到。

具体代码实现 #

假设你已经通过某种方式获取到了文件夹内的图片列表（比如imageList数组），可以这样写：

// 页面初始化时，读取本地存储的上次索引，没有则设为-1（表示未选过）
let lastRandomIndex = parseInt(localStorage.getItem('lastImageIndex')) || -1;
// 替换成你实际的图片路径列表
const imageList = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];

// 生成并展示随机图片的函数
function showRandomImage() {
  let newIndex;

  // 如果图片数量大于1，确保新索引和上次不同
  if (imageList.length > 1) {
    do {
      newIndex = Math.floor(Math.random() * imageList.length);
    } while (newIndex === lastRandomIndex);
  } else {
    // 只有一张图片时，直接用它（不可避免重复）
    newIndex = 0;
  }

  // 更新上次索引，并保存到localStorage
  lastRandomIndex = newIndex;
  localStorage.setItem('lastImageIndex', lastRandomIndex);

  // 替换成你实际展示图片的DOM操作
  const imgElement = document.getElementById('randomImage');
  imgElement.src = imageList[newIndex];
  imgElement.alt = `Random image ${newIndex + 1}`;
}

// 页面加载完成后的处理：如果有上次的记录，直接展示；否则生成第一张随机图
window.addEventListener('load', () => {
  if (imageList.length === 0) return;
  
  if (lastRandomIndex !== -1 && lastRandomIndex < imageList.length) {
    // 校验索引有效性，避免图片列表变化导致索引失效
    document.getElementById('randomImage').src = imageList[lastRandomIndex];
  } else {
    showRandomImage();
  }
});

// 给Random按钮绑定点击事件
document.getElementById('randomBtn').addEventListener('click', showRandomImage);

额外注意事项 #

• 图片列表动态更新的情况：如果你的图片列表会动态变化（比如文件夹新增/删除图片），要注意localStorage里的旧索引可能超出新列表的范围。代码里加了lastRandomIndex < imageList.length的校验，一旦发现索引无效就会重新生成，避免报错。
• 浏览器缓存清除的影响：如果用户手动清除了浏览器的本地存储，lastRandomIndex会回到初始状态，这是正常的浏览器行为，无法避免。
• 单张图片的特殊处理：当文件夹里只有一张图片时，重复是必然的，代码里已经做了兼容，不会陷入无限循环。

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