Сохранение нескольких объектов в сеансе - PullRequest
Новая
       68

Сохранение нескольких объектов в сеансе

0 голосов
/ 30 мая 2020

Я пытаюсь сохранить объекты в sessionStorage каждый раз, когда нажимаю на значок закладки. Но вместо сохранения нескольких объектов. Каждый раз, когда я нажимаю на значок закладки, чтобы сохранить книгу; он заменяется новым значением. 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);

1 Ответ

0 голосов
/ 30 мая 2020

Вы можете иметь только уникальные ключи внутри хранилища сеансов, поэтому каждый раз, когда вы вставляете новый объект с тем же ключом, хранилище перезаписывает старый. Вы можете сделать и сохранить каждую книгу, например, "книга_1", "книга_2". Или вы можете сохранить массив, но вы должны использовать json .stringify (name_of_your_array), а затем, когда вы хотите, чтобы ваш массив вернулся, вы можете использовать json .parse (storage.getItem (key))

...