帶有 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