在 sessionStorage 中保存多個對象

Question

每當我單擊書簽圖標時，我都會嘗試將對象保存在 sessionStorage 中。 但不是保存幾個對象。 任何時候我點擊我的圖標書簽來保存一本書； 它被新值覆蓋。

如何在 sessionStorage 中添加多個對象（書籍）？ 謝謝

這是代碼片段

try {
        const responseData = await sendHttpRequest(
            'GET', 
            "https://www.googleapis.com/books/v1/volumes?q=" + search );

        const listOfBooks = responseData; 
            console.log(listOfBooks);

        for (i=0; i < listOfBooks.items.length; i++) {
             console.log(listOfBooks.items[i]);

            const postEl = document.importNode(template.content, true);
            console.log("postEl", postEl);

            //BookMark Icon event
            const target = postEl.querySelector('.icon-bookmark');    
            target.addEventListener('click', () => {

                sessionStorage.setItem('bookStorage', bookStorage);
                sessionStorage.setItem('bookStorage' , JSON.stringify(bookStorage)); 

                const extractedBook = sessionStorage.getItem('bookStorage');

                const extractedBookInfo = JSON.parse(sessionStorage.getItem('bookStorage'));
                console.log(extractedBookInfo);
            }); 

            postEl.querySelector('.id').textContent = 'id: '+ listOfBooks.items[i].id;
            postEl.querySelector('.titre').textContent = 'Titre: '+ listOfBooks.items[i].volumeInfo.title;
            postEl.querySelector('.author').textContent = 'Auteur: '+ listOfBooks.items[i].volumeInfo.authors;
            postEl.querySelector('.desc').textContent ='Description: '+ listOfBooks.items[i].volumeInfo.description;
            postEl.querySelector('img').src = listOfBooks.items[i].volumeInfo.imageLinks.thumbnail;

            if (postEl.querySelector('.desc').textContent.length > 200) {
                postEl.querySelector('.desc').textContent = postEl.querySelector('.desc').textContent.substring(0,200);
            }

            if (!postEl.querySelector('img').src) {
                postEl.querySelector('img').src ="resources/css/img/unavailable.png";
            }

            listElement.append(postEl); 

            const bookStorage = {
                id: listOfBooks.items[i].id,
                title: listOfBooks.items[i].volumeInfo.title,
                author: listOfBooks.items[i].volumeInfo.authors,
                desc: listOfBooks.items[i].volumeInfo.description,
                img: listOfBooks.items[i].volumeInfo.imageLinks.thumbnail
                }; 

        }  
    } catch (error) {
      alert(error.message);
    }

} 

btnRechercher.addEventListener('click', fetchBooks, false);

Answer 1

您只能在 session 存儲中擁有唯一鍵，這就是為什么每次插入具有相同鍵的新實體時，存儲都會覆蓋舊實體。 您可以為每本書執行一次並保存，例如“book_1”、“book_2”。 或者你可以存儲一個數組，但你必須使用 json.stringify(name_of_your_array) 然后當你想要你的數組時你可以使用 json.parse(storage.getItem(key))