Question

为了总结问题，我将首先说明任务是什么。

因此，对于东部事件，我们将在一个网站（不同页面，相同域，相同网站）上添加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

<body>
    <div class="container">
      <div id="1" class="osterhasen"><img src="img/choco.png"></img></div>
      <div id="2" class="osterhasen"><img src="img/geschichte.png"></img></div>
      <div id="3" class="osterhasen"><img src="img/mitarbeiter.jpg"></img></div>
    </div>
</body>

最后，应将对图片的点击保存在整个网站的浏览器存储中，找到所有3张图片后，应打开一个包含特定URL的新窗口。

非常感谢您的宝贵时间。

最诚挚的问候

Answer 1

您不能像这样向localStorage分配属性（该属性不存在，并且无论如何都应使用它的setItem方法）：

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

因此将id分配给变量：

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

Working version

Answer 2

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

  $(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的数组不保存或被覆盖？

2 个答案: