如何将页面刷新随机展示图片的JavaScript改为按固定顺序展示

核心是通过localStorage持久化存储图片展示的序号，避免页面刷新后状态丢失，修改后的代码如下：

jQuery(document).ready(function($){
  var image = new Array ();
  image[0] = "image1.jpg";
  image[1] = "image2.jpg";
  image[2] = "image3.jpg";
  // 读取本地存储的上次展示索引，首次加载默认-1
  let lastIndex = Number(localStorage.getItem('imgShowIndex')) || -1;
  // 计算本次展示索引，超过数组长度自动归零循环
  let currentIndex = (lastIndex + 1) % image.length;
  // 存回本次索引供下次使用
  localStorage.setItem('imgShowIndex', currentIndex);
  $('#css-id span img').attr('src', 'http://url..' + image[currentIndex]);
});

补充说明 #

• 该方案仅在当前浏览器的当前站点生效，用户清除浏览器缓存/本地存储后，序列会重置从第一张开始展示
• 如果需要实现跨设备的序列同步，需要将索引存储到服务端用户账户关联数据中，每次页面加载时从接口请求当前索引再更新

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