在 sessionStorage 中保存多个对象

Question

I am trying to save objects in a sessionStorage anytime I click on a bookmark icon. But instead of saving several objects. Anytime I click on my icon bookmark to save a book; it is being overridden by the new value.

How could I add several objects (books) in my sessionStorage? Thanks

here is the code snippet

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

You can only have unique keys inside session storage, that's why everytime you insert a new entity with the same key the storage overwrites the old one. You can do a for and save every book, for example 'book_1', 'book_2'. Or you can store an array, but you have to use json.stringify(name_of_your_array) and then when you want your array back you can use json.parse(storage.getItem(key))