在 sessionStorage 中保存多个对象答案

【问题标题】：Save multiple objects in a sessionStorage在 sessionStorage 中保存多个对象
【发布时间】：2020-05-30 11:58:34
【问题描述】：

每当我单击书签图标时，我都会尝试将对象保存在 sessionStorage 中。但不是保存几个对象。任何时候我点击我的图标书签来保存一本书；它被新值覆盖。

如何在 sessionStorage 中添加多个对象（书籍）？谢谢

这里是代码sn-p

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);

【问题讨论】：

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

标签： javascript ajax httprequest session-storage

【解决方案1】：

您只能在会话存储中拥有唯一键，这就是为什么每次您插入具有相同键的新实体时，存储都会覆盖旧实体。您可以为每本书执行一次并保存，例如“book_1”、“book_2”。或者你可以存储一个数组，但是你必须使用 json.stringify(name_of_your_array) 然后当你想要你的数组时你可以使用 json.parse(storage.getItem(key))

【讨论】：