网站页面刷新显示新随机笑话的实现问题及现有代码咨询

嘿，我来帮你搞定这个需求！你现在的脚本每次刷新可能会重复显示笑话，核心问题是没有记录已经展示过的内容，而且每次调用函数都会重新初始化笑话数组。咱们可以用localStorage来持久化跟踪已显示的笑话，这样就能保证每次刷新都给用户展示没看过的新笑话啦。

具体实现思路 #

1. 将笑话数组放在函数外部，避免每次执行函数都重新创建一遍；
2. 利用localStorage存储已经显示过的笑话索引，因为页面刷新后内存变量会清空，本地存储能保留数据；
3. 每次刷新时，从未显示过的笑话里随机挑选一个；
4. 当所有笑话都展示过一轮后，自动重置已显示列表，重新开始循环。

完整代码示例 #

// 把笑话数组放在全局作用域，避免每次函数执行都重新创建
const jokeList = [
  "为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 = Dec 25",
  "前端工程师的电脑里为什么总有很多咖啡？因为他们要处理太多的bug和'404 Not Found'",
  "你知道吗？数组从0开始计数是因为程序员喜欢从零开始搞事情😎"
];

function showJoke() {
  // 从localStorage获取已显示的笑话索引，没有的话初始化为空数组
  let shownJokeIndexes = JSON.parse(localStorage.getItem('shownJokes')) || [];
  
  // 过滤出未显示过的笑话
  const availableJokes = jokeList.filter((_, index) => !shownJokeIndexes.includes(index));
  
  // 如果所有笑话都显示过了，重置已显示列表
  if (availableJokes.length === 0) {
    shownJokeIndexes = [];
    availableJokes.push(...jokeList);
  }
  
  // 随机挑选一个未显示的笑话
  const randomIndex = Math.floor(Math.random() * availableJokes.length);
  const selectedJoke = availableJokes[randomIndex];
  // 获取这个笑话在原数组中的索引，方便记录到已显示列表
  const originalIndex = jokeList.indexOf(selectedJoke);
  
  // 更新已显示列表并存入localStorage
  shownJokeIndexes.push(originalIndex);
  localStorage.setItem('shownJokes', JSON.stringify(shownJokeIndexes));
  
  // 把笑话插入到页面指定元素中（不建议用document.write，会覆盖整个页面）
  const jokeElement = document.getElementById('joke-container');
  if (jokeElement) {
    jokeElement.textContent = selectedJoke;
  } else {
    // 如果没有指定容器，临时创建一个
    const newElement = document.createElement('div');
    newElement.id = 'joke-container';
    newElement.textContent = selectedJoke;
    document.body.appendChild(newElement);
  }
}

// 页面加载时执行函数
window.onload = showJoke;

注意点说明 #

• 我把document.write换成了更安全的DOM操作方式，因为document.write在页面加载完成后使用会覆盖整个页面，体验很差；
• localStorage存储的是字符串，所以要用JSON.parse和JSON.stringify来处理数组；
• 如果你的笑话数组里有重复的笑话内容，jokeList.indexOf(selectedJoke)可能会拿到错误的索引，这种情况下建议给每个笑话加唯一ID，比如用对象数组[{id: 1, content: "..."}]来存储，这样跟踪索引更准确。

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