跨多个页面获取无序的、不重复的项目

Question

我有五个不同的页面。每个都有一个随机重定向到其他按钮的按钮。

我正在努力做到这一点，以便用户不会进入重复的页面（至少在浏览完所有页面之后不会）。

我可以添加一个函数来浏览同一页面中随机、不重复的内容，但是我怎样才能让这个函数在不同的页面上工作，记住哪些页面已经被访问过？

我尝试将该函数保存在外部 js 文件中，并在每个页面的 head 部分调用它，但它不起作用。

我也尝试过使用 localStorage，但没有结果。

我是不是做错了什么？这可能吗？

这就是我正在使用的：

localStorage.getItem("currentRemainingPages");

var page1 = "0001.html"
var page2 = "0002.html"
var page3 = "0003.html"
var page4 = "0004.html"
var page5 = "0005.html"

const originalPages = [page1, page2, page3, page4, page5];
let remainingPages = [];

function randomize() {
  if (remainingPages.length === 0) remainingPages = originalPages.slice();
  localStorage.setItem("currentRemainingPages", remainingPages);
  const {
    length
  } = remainingPages;
  const [page] = remainingPages.splice(Math.floor(Math.random() * length), 1);

  window.location.href = page;
}

<h1>Page 0</h1>
<p><button onclick="randomize()" type="button">Random Page</button></p>

Answer 1

三个问题：

您只需调用 localStorage.getItem("currentRemainingPages"); 但不对结果做任何事情。相反，您总是使用空数组

let remainingPages

您需要对数组进行序列化和反序列化，因为 localStorage 仅存储字符串。您可以简单地通过分隔符连接和拆分，或使用 JSON，或其他一些自定义编码。
您调用 localStorage.setItem("currentRemainingPages", remainingPages); 之前您 select （并删除）remainingPages 中的随机页面。

改为使用

const originalPages = ["0001.html", "0002.html", "0003.html", "0004.html", "0005.html"]
let remainingPages = (() => {
    try {
        return JSON.parse(localStorage.getItem("currentRemainingPages"));
    } catch(e) {
        return null;
    }
})();
if (!Array.isArray(remainingPages) || remainingPages.length == 0)
    remainingPages = originalPages.slice();

function randomize() {
    const i = Math.floor(Math.random() * remainingPages.length);
    const [page] = remainingPages.splice(i, 1);
    localStorage.setItem("currentRemainingPages", JSON.stringify(remainingPages));
    window.location.href = page;
}

跨多个页面获取无序的、不重复的项目

Get shuffled, non-repeated items across multiple pages

javascript

random

shuffle