Javascript RNG映像的本地存储

我创建了一个随机数生成器，它连接到一组图像，其中一个图像在用户加载页面时随机显示给用户

我正在努力弄清楚如何将其中一个图像放入本地存储，以便在重新加载页面时不会出现相同的图像，我只是不知道如何操作

这是我的JSFIDLE，如果您需要它，我不知道如何显示这些图片，但我希望这不会引起问题：

HTML

---

选择后，您可以将最后一个图像的索引存储在本地存储器中：

localStorage.setItem('lastViewedImage', randomNum);

然后在运行choosePic时检查上次查看的图像索引，并处理不选择您认为合适的相同图像：

var lastViewedImage = localStorage.getItem('lastViewedImage');
if (lastViewedImage == randomNum) {
    // Handle collision
}

编辑：

编辑2：

---

这实际上是一个糟糕的解决方案。由于使用的索引是临时数组中项的索引，因此该索引不会应用于在后续执行函数时生成的临时数组。希望这能给你一些解决问题的方法。

你可以继续循环你的随机数选择，直到它与上次选择的数字不同。
注意-由于随机性的性质，您可能会不断重复使用相同的数字，并最终循环1亿次，这将杀死您的页面，但由于概率的性质，发生这种情况的可能性可以忽略不计

// somewhere
var myPix = new Array("./images/service2.png","./images/service3.png","./images/service4.png");

function choosePic() {
    // Get the last number stored.
    var lastViewedImage = localStorage.getItem('lastViewedImage');
    // Set a very high number if none was stored before.
    if (lastViewedImage === null) lastViewedImage = 65535;

    // Keep looping as long as we come up with the same number.
    var random = 0;
    do {
        random = Math.floor((Math.random() * myPix.length));
    } while (random === lastViewedImage);

    // Got a different number, save it and return the image
    localStorage.setItem('lastViewedImage', random);
    return myPix[random];
}

// Use as:
document.getElementById("myPicture").src = choosePic();

---

这会在

choosePic

函数中硬编码图像数组的名称，这通常被认为是不好的做法；你可以把数组传递给选择符，但是如果你通过不同的数组（左边作为练习的读者），那么应该考虑如何处理随机数。< /P>不要把图像放在本地存储中，只需要选择随机数。您是否试图避免在重新加载时仅使用同一图像一次？例如，image7、image3、image7是否可以接受？或者，在可用图像用完之前，您永远不想显示相同的图像吗？是的，只是不想显示相同的图像两次，因为我存储的是RNG创建的正确数字？但是，一旦检测到同一图像，我将如何阻止它出现？是否可以忽略某个号码，然后在没有该号码的情况下再次启动RNG？您可以再次调用choosePic函数，但这会很烦人，并且可能会反复运行。您可以拼接阵列以删除已选择的图像，而不是对照随机数检查已使用的索引，这样就连选项都没有了，但您需要更新随机数生成器以处理新的阵列长度。感谢您的帮助，Ken，我只是不知道如何“拼接阵列”。如果您能帮助meSo从localStorage获取使用过的索引，您可以使用myPix.splice（LastVieweImage，1）之类的工具从阵列中删除使用过的图像，我将不胜感激。这将从有问题的图像（LastVieweImage）的索引开始，并从数组（图像）中删除一项。然后您可以从数组中选择图像，因为所有图像都是有效的选项。@Syystole请检查我的最新编辑，我已经添加了一个我在评论中描述的示例。

var lastViewedImage = localStorage.getItem('lastViewedImage');
if (lastViewedImage == randomNum) {
    // Handle collision
}

function choosePic {
    // Get the index of the last viewed image
    var lastViewedImage = localStorage.getItem('lastViewedImage');
    // Use a temp array as not to modify the array storing the images
    var tempArr = myPix;
    if (lastViewedImage != null) {
        // Remove the used image from the temp copy of the picture array
        tempArr.splice(lastViewedImage, 1);
    }
    //Random Number Generator based on the number of pictures in temp array 
    var randomNum = Math.floor(Math.random() * tempArr.length);
    // Update the stored index with the new used images index
    localStorage.setItem('lastViewedImage', randomNum);
    //Random Number with image is set in HTML
    document.getElementById("myPicture").src = myPix[randomNum]; 
}

// somewhere
var myPix = new Array("./images/service2.png","./images/service3.png","./images/service4.png");

function choosePic() {
    // Get the last number stored.
    var lastViewedImage = localStorage.getItem('lastViewedImage');
    // Set a very high number if none was stored before.
    if (lastViewedImage === null) lastViewedImage = 65535;

    // Keep looping as long as we come up with the same number.
    var random = 0;
    do {
        random = Math.floor((Math.random() * myPix.length));
    } while (random === lastViewedImage);

    // Got a different number, save it and return the image
    localStorage.setItem('lastViewedImage', random);
    return myPix[random];
}

// Use as:
document.getElementById("myPicture").src = choosePic();