解决HTML表单提交导致页面意外刷新的问题：理解按钮类型与表单行为

<form onsubmit="false">
    <!-- ... input fields ... -->
    <button id="addBttn">Add</button>
</form>

<form onsubmit="false">
    <label for="title">Please enter the title of your book:</label>
    <input type="text" name="title" id="title" required><br/>

    <label for="author">Please enter the author of the book</label>
    <input type="text" name="author" id="author" required><br/>

    <label for="genre">Please enter the genre of the book:</label>
    <input type="text" name="genre" id="genre" required><br/>

    <label for="reviews">Please enter your review on the book:</label>
    <input type="text" name="reviews" id="reviews" required>

    <!-- 关键修改：添加 type="button" -->
    <button type="button" id="addBttn">Add</button>
</form>

// booksJS.js

let myArray = [];

// 尝试从sessionStorage加载数据（如果存在）
const storedArray = sessionStorage.getItem("array");
if (storedArray) {
    // 注意：sessionStorage存储的是字符串，需要解析回数组
    // 并且如果存储的是对象数组，需要更复杂的反序列化逻辑
    // 这里的示例假设存储的是简单字符串或JSON字符串
    try {
        myArray = JSON.parse(storedArray);
        // 如果存储的是对象数组，需要将JSON对象重新实例化为Books类的对象
        myArray = myArray.map(item => new Books(item.Title, item.Author, item.Genre, item.Review));
    } catch (e) {
        console.error("Failed to parse array from sessionStorage:", e);
        myArray = [];
    }
}


class Books {
    constructor(Title, Author, Genre, Review) {
        this.Title = Title
        this.Author = Author
        this.Genre = Genre
        this.Review = Review
    }

    getTitle(){ return this.Title }
    getAuthor(){ return this.Author }
    getGenre(){ return this.Genre }
    getReview(){ return this.Review }
}

const form = document.querySelector("form"); // 获取表单元素

// 监听表单的 submit 事件
form.addEventListener("submit", (event) => {
    // 阻止表单的默认提交行为（即页面刷新）
    event.preventDefault();

    let userTitle = document.getElementById("title").value;
    let userAuthor = document.getElementById("author").value;
    let userGenre = document.getElementById("genre").value;
    let userReview = document.getElementById("reviews").value;

    // 验证输入（可选，但推荐）
    if (!userTitle || !userAuthor || !userGenre || !userReview) {
        alert("请填写所有必填字段！");
        return;
    }

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj);
    console.log("新对象已添加:", newObj);

    // 将数组存储到sessionStorage
    // 注意：sessionStorage只能存储字符串，需要将对象数组转换为JSON字符串
    sessionStorage.setItem("array", JSON.stringify(myArray));

    console.log("当前sessionStorage中的数组:", sessionStorage.getItem("array"));

    // 清空表单字段以便下次输入
    form.reset();
    // 或者手动清空
    // document.getElementById("title").value = "";
    // ...
});

// 如果需要，可以在页面加载时显示已存储的数据
// 假设你有一些p标签来显示数据
function displayBooks() {
    const bookTitleP = document.getElementById("bookTitle");
    const bookAuthorP = document.getElementById("bookAuthor");
    const bookGenreP = document.getElementById("bookGenre");
    const bookReviewP = document.getElementById("bookReview");

    // 简单示例：只显示最新添加的书籍信息
    if (myArray.length > 0) {
        const latestBook = myArray[myArray.length - 1];
        bookTitleP.textContent = "Title: " + latestBook.getTitle();
        bookAuthorP.textContent = "Author: " + latestBook.getAuthor();
        bookGenreP.textContent = "Genre: " + latestBook.getGenre();
        bookReviewP.textContent = "Review: " + latestBook.getReview();
    } else {
        bookTitleP.textContent = "";
        bookAuthorP.textContent = "";
        bookGenreP.textContent = "";
        bookReviewP.textContent = "";
    }
}

// 页面加载时显示数据
displayBooks();