在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

您只能在会话存储空间中使用唯一的密钥，这就是为什么每次插入具有相同密钥的新实体时，存储都会覆盖旧的实体。您可以针对并保存每本图书，例如“ book_1”，“ book_2”。或者，您可以存储一个数组，但是必须使用json.stringify（name_of_your_array），然后在要返回数组时可以使用json.parse（storage.getItem（key））