Javascript 具有本地存储的阵列不'；无法保存或被覆盖？

为了总结这个问题，我将首先解释任务是什么

所以对于东部活动，我们将在一个网站上添加3个兔子图片（不同的页面，相同的域，相同的网站）。一旦你找到并点击了所有3张图片，它就会打开一个带有特定URL的新窗口

现在我成功地编写了代码，将3张图片的点击保存在一个数组中，然后用URL打开新窗口。但遗憾的是，一旦我改变页面，它就不起作用了。阵列未保存在浏览器存储中，或者在打开新页面后被覆盖

我不太清楚现在的问题是什么。我希望你们中的任何人都能帮助我

我曾尝试使用localStorage和sessionStorage，但我认为我没有正确使用它们。我将在下面为您提供我当前的代码

Javascript

$(function(){
    var imageStore = [];
    $('.osterhasen').click(function(e){
        localStorage.id = $(this).attr('id');
        // returns index of the element in the array, if the element was not found returns false
        var imageExists = $.inArray(localStorage.id, imageStore);
        if (imageExists >= 0){
            // If element exists, do nothing
            e.preventDefault;
        } else {
            // If element doesn't exist, add element
            imageStore.push(localStorage.id);
        }

        localStorage.setItem('imageStore', JSON.stringify(imageStore));

        localStorageimageStorage = JSON.parse(localStorage.getItem('imageStore'));

        console.log(localStorageimageStorage);

        if (localStorageimageStorage.length == 3) {
        window.open('https://www.google.ch');
        }
    });
});

HTML

最后，点击的图片应该保存在整个网站的浏览器存储中，一旦你找到了所有的3张图片，它应该会打开一个新窗口，其中有一个特定的URL

非常感谢您抽出时间

---

致以最诚挚的问候

是的，您每次都在覆盖该键。要根据需要存储阵列，可以尝试以下操作：

  $(function(){
    var imageStore = [];
    $('.osterhasen').click(function(e){

    if(localStorage.getItem('imageStore') === null){ // check if such key exists
        localStorage.setItem('imageStore', JSON.stringify([$(this).attr('id')])); // if it doesn't create an array with first item imageStore and set it to key imagestore
    } else {
        var currentStorage = JSON.parse((localStorage.getItem('imageStore')));
        if(!currentStorage.includes($(this).attr('id')){ // if id doesn't exist add it.
           currentStorage.push($(this).attr('id')); // push to new image inside of it
           localStorage.setItem('imageStore', JSON.stringify(currentStorage)); // set the key to the new value
        }

    }

    localStorageimageStorage = JSON.parse(localStorage.getItem('imageStore')); // you should have all the 3 pictures here in an array
     console.log(localStorageimageStorage);

        if (localStorageimageStorage.length == 3) {
        window.open('https://www.google.ch');
        }
    });
});

---

您不能像这样将属性分配给

localStorage

（它不存在，您应该使用它的

setItem

方法）：

因此，将

id

分配给变量：

const id = $(this).attr('id');
const imageExists = $.inArray(id, imageStore);

---

您好，谢谢您抽出时间。我没有否决你的评论。我检查了版本，遗憾的是，同样的问题仍然存在，更改页面后数组没有“存储”到哪里。您将页面更改到哪里？您知道localStorage仅适用于文档的源文件吗？如果您转到开发工具并在工作演示中打开“存储”选项卡，您可以在单击这些元素时看到存储在localStorage中的数据。我目前正在我的浏览器上测试此本地存储。我制作了两个html文件来测试页面之间的“存储”。example.ch/page.html example.ch/page2.html^就是它的样子。我想那应该行不行？我还是个新手。你好，谢谢你抽出时间。您的版本在多个页面上正确存储阵列，这很好，但遗憾的是出现了新问题。它不再检查图像是否已经存在。如果我在同一个图像上单击3次，它会将每个图像添加到数组中，然后打开URL。每个图像只应添加一次，一旦所有3个图像都被“单击”，则应打开一个新窗口。谢谢你的帮助@Kryptox你能检查一下这个版本吗，我做了一些editsHello Vladimir谢谢你！它工作得很好。这就是我要找的。谢谢@Kryptox我很高兴它有帮助，我希望代码是可以理解的。

localstorage.id = $(this).attr('id');
var imageExists = $.inArray(localstorage.id, imageStore);

const id = $(this).attr('id');
const imageExists = $.inArray(id, imageStore);