带有 localStorage 的数组不保存或被覆盖？

Question

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

因此，对于东部活动，我们将在一个网站上添加 3 个兔子图像（不同的页面、相同的域、相同的网站）。 找到并单击所有 3 个图像后，它应该会打开一个带有特定 URL 的新窗口。

现在我设法编写了将 3 张图片的点击次数保存在一个数组中的代码，然后使用 URL 打开新窗口。 但遗憾的是，一旦我更改页面，它就不起作用。 Array 要么没有保存在浏览器存储中，要么在我打开新页面后被覆盖。

我现在不确定是什么问题。 我希望你们中的任何人都可以帮助我。

我尝试使用 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);

工作版本

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 个解决方案

解决方案1
1 2019-04-05 08:56:34

解决方案2
0 已采纳 2019-04-05 08:55:48

带有 localStorage 的数组不保存或被覆盖？

问题描述

2 个解决方案

解决方案1 1 2019-04-05 08:56:34

解决方案2 0 已采纳 2019-04-05 08:55:48

解决方案1
1 2019-04-05 08:56:34

解决方案2
0 已采纳 2019-04-05 08:55:48