将多个表单输入值以数组的形式存储在 JavaScript 中的本地存储中

Question

I am trying to save input values submitted through form into local storage in the form of the array, but once the form is submitted again, the saved value in local storage gets changed with the new submitted value as the

function bookDetails(bookName,bookAuthor,bookType) {
    this.name = bookName;
    this.author = bookAuthor;
    this.type = bookType;
}

let libraryForm = document.getElementById("bookForm");
libraryForm.addEventListener("submit", libraryBooksDetails);

function libraryBooksDetails(e,index) {
    
    e.preventDefault();
    console.log("The book details have been submitted");
    let bookName = document.getElementById("bookName").value;
    let bookAuthor = document.getElementById("author").value;
    let bookType;
    let fiction = document.getElementById("Fiction"); 
    let programming = document.getElementById("ComputerProgramming");
    let personal = document.getElementById("PersonalDevelopement");
    
    if(fiction.checked){
        bookType = fiction.value;
    }
    else if(programming.checked){
        bookType = programming.value;
    }
    else if(personal.checked){
        bookType = personal.value;
    }
// BookDetails Object
    let book = new bookDetails(bookName,bookAuthor,bookType);
    
    let bookData = ""
    bookData = bookData || [];
    let nameOfBooks = bookData.concat(bookName)
    // let nameOfBooks = bookData
    // nameOfBooks.push(book.bookName);
    localStore.setItem("books",JSON.stringify(nameOfBooks))
    console.log(book);

    let display = new Display()
    display.add(book);
    display.clear();
}

Thanks

Answer 1

I'm not sure I understand the question completely because you are setting the value let book = new bookDetails but that is not what you are storing in local storage.

 // First time bookData value is set, this is always an empty string let bookData = ""; // Since empty string is a falsey value, bookData value is re-set to an empty array bookData = bookData || []; // nameOfBooks is initialised as an array with one value of bookName let nameOfBooks = bookData.concat(bookName); // books key in local storage is a stringified array with one item localStore.setItem("books", JSON.stringify(nameOfBooks));

localStorage.setItem(key, value) will always replace the existing value at that key. If you want to append to the stored value, first get the value and parse it before appending the new value.

 const oldValue = localStorage.getItem('books'); const parsed = JSON.parse(oldValue); const newValue = parsed.concat(nameOfBooks); localStorage.setItem('books', JSON.stringify(newValue));